{"_id":"@material/mwc-circular-progress-four-color","_rev":"486-81af3292a7c6992b6aaea6442537ea3a","name":"@material/mwc-circular-progress-four-color","dist-tags":{"canary":"0.26.0-canary.0af8ade5.0","latest":"0.27.0"},"versions":{"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.3d334ccc.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RoTjUF+yvP5CYmUWAxztWL+/nWB+d6pDHnfsrzrhtcxwu1cROsgUoH316u+ulJP9iVOn3A2mBv2CKTaVGHK3Pg==","shasum":"71c1b1b46dc9c3209ead2f12822831310157a5d2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.3d334ccc.0.tgz","fileCount":10,"unpackedSize":27075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE7nCRA9TVsSAnZWagAAPS8P/3XNC745fOWbve0vEE4l\nSB6SxkSgR51sdlQNeFgBP0yDAHS0BBYD7e0H6+LMnZKC0dxzjNhQeju4QvA2\nQwMB24GAvzpT3RP/dxFHDVuBCoU+tiZ15Wcl/DZnP5L++nNuoejxws/o8Og2\nutn49h1Pk9TVJXqymVIEXQZ4jU+0Sw6k4IOidkAEMWdNJnuxnBLyCFsKktHg\nm21Ju16ym5MWR48lWX3uzoI/s0jjU8DpMJQZ2XXoVzh/sBUNotVHW8UKSeXp\nKzW3wjQ1KkWaehZ5h4BB4DSiTmWluEHcQiugHOLJwT4bR/oxRVyEMC7q/a6D\nsNgR9JLdNdykLnMmdPQvjH8Dj5s+hBDvaxBmptmQD6EaesbyoqwhD/MUQggA\nMFsTxG4ES/o7BpOpzkkhudgxZ6FxRGTpm8+kqnIacMfSLpxPuCpkkde1C01U\n8VeZzsTqPEuFmSp1zQRDtcosSVp9tM7eq0Ws6enme2Ock3uWQzx7Se43JO+z\nVnmQQYS1+ccHBFvF/bbTvpTN6x75eX0Rc3Y6iWBfMmBxhceJB3IlOeCs8pD9\nwzY/JXMg5wZJuldoUHc35bboffrnv7l1JTZyGNf//+9kvso3BIsRkxoZb/ji\ndez9vdg/n2KAgvgpxdokVZmwnrg55/CF3TJkUDt7A8Ir3Ek2yFGWue8mEQsz\niAm9\r\n=H+B/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXLoLvoVq2npTRh/QRO0/uJnPclyHtJkvh+e/uho2lcAIgXqa9dz9pqkSnD9SCj/QkqR6vbyoS84BDGntIIPd9Z80="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.3d334ccc.0_1595952870809_0.09387116930039974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.82ac569e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kKVlAvSWS5J0vkn6T2wWeZuccRkegcCbm5Dlp9mAgahKgApKZKpvwtq+jUPI7z4ujGcqvqRDk6JrQqs69i289w==","shasum":"c5893aef930c6afbebe81a8d18ef90f0a55bea52","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.82ac569e.0.tgz","fileCount":10,"unpackedSize":27075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHFyCRA9TVsSAnZWagAAmFUP/ijhm1ZHmhvC4a3gaIGm\nkNCWMV1cOtSeHlG7EAWUmw7oxlUnNwOQScAtQ8PUO0WPMjJZIDg2q6p8ZDiA\nt1v4Nt328PVIEkCToCBXv0xnqtH1lSQfsi1/OWQrrRrDMajH2iEOczDwJsil\nl6VvO6npsg+ov0kmyAvrMTe3tGUm19a1T8UR1OapuD105A1X2lY6l14qUAai\nWebpmv7Ixpo3MrVgo/uXKvazC+S9ZNBj6eA5SldZOMWKWNiDMGlnxFdzFmsx\n1Mm0bZW/PjDystDFqjlQiFcMBmERHSY79J3eqByjSExW76GhvSfp/BiakUQm\nkWwAKCU9ji8F5Hg17018NjRlWcV8mjJ5xHHaBU5Y3YHhzHenQACl/sfU30Mg\nW+5jBzksCTYpLJ/ddfL5uIw2+Gva4LtBenYmpOycC7xLcxv58SgtHQNCuu+/\nZVmzMRgKc0dqFvuFGZ5+svZf20RDqX4C/CvXrQvIXjyrT+kYta+hmrqND5GZ\nsu4bCQmQhYDlkg2FI5PqVAs3cIdhlaMbjysg37k+nQmbat6InYAPLwjM558a\nkYoUGQzgfoe9aCodSSAF0Mu9UzTYly3PclovKVQ5Nan80aELWCKax0MOngDg\ncejGQWDmLzwkoCJ3pehFz7HNlIfxTxwEM5RYGi8myKoHLdBmH/1+8abxA4lu\nmEJC\r\n=DkEL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETFsMSSJgdPxXHSw8FbM5Fi9f78W/8P6BA5sAKjaX6qAiAcyEgZtpIEanfOKqgCIy31+Bg/xdYcnteBk0uCRYdVkA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.82ac569e.0_1595961713962_0.04206941515359053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.99df7397.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LOhqLslP7DhJg3Z1UDjxmP/nr3Jqx4KJStPMcpiFR1IXD7wl8HRlanxvY+MhBRE1lZXxJQPXoMi680kHXUJSiw==","shasum":"d273b7067f05a8d945d3f7f7ecc7ddbeb70b0cd2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.99df7397.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOF5CRA9TVsSAnZWagAAM0YP/2NejsFLcfOu8JsSa96N\nVk3liWIt9kUxSbcq6hMNxLZO+/QH+GuxEtANJO/+2T5YRi/8XRYPF+aD0v+Q\nNnGxVquA6QU2FWIwjL19W2tG6xe2z9dabthEfj6mDaxxEde9BQJruTDUGZB5\nYg2qFJfBhKQpR84S/Rg8KLIDR2vnm/QrhR2CwZhFqElme7d1qcFMf6OzI83Y\nidA3fhvwLF/QdSDAkL8Tdxc6xI3N2RL9sur3NcxLLrPG8XrLTzHxz+BBORT+\nLdDNKHlow2l1Vs/2kSapTuF2KHvcbC4l6y1IJvQ8DUkmLx0A3WLTkZRuqxEx\nDqwLJH5URf39qNLy568k0o9Ep3abXAzRL+Tcj29eqvSiQExdh/nVL2/DXRUF\nEUDOOpAs5CxqWPYaEruoNwHjbjB5jSyMZj80sgNqMmLYcFalGHTsOGVM5ly7\n0YXvUzr7jMdDi31sx0PEHHt5H+2k0ffTu0Bq0Yy3Za1zUDamBic3Wrf7QldD\n4/Pil32hyqoaVbAAN0LpVwHUAL3A3LM06B8Hjlp8zZkyJSBbdkAknKISBa9/\n7/lgSIc9kvfbbmDb9Hle0tqjxATAAfEYP/XD/FtpASzeY7tuwX+D+bkqjbZk\nZNsc51o7RtTHNKe+LcMEptWTHS49FPJqMf5r/S5IJvXzEJxOAQhb3dHtYeSL\nWpEE\r\n=yhuw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcDI1ZSI83dSuLYS+beqYcv08p01JzolX3seEpBMJXlAiAkRwzJfY0bBAKvCoj+Mf1EZlLprHw758q7RWthuGpNgA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.99df7397.0_1595990392981_0.8557567885067643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.45493e05.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-laStm985cfJy5Wz2aTpph5Ba8oYzNdAl1D2gNJhlu6bmOCNKC87T9fSyoUNDrlxkvJ8CVxDlFjHQPbJ+jul96A==","shasum":"04b7db8136f7b4a057e27db18639518fa873318f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.45493e05.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7SCRA9TVsSAnZWagAAy3gP/RdlNOeGDmQ9RBVjyW9X\nbu3E4sFALmjX1L2NeFHnINyhu4yB31nr/4EXjv1wnnsANkoWtJms62NEKoSp\nmDjmASMJeO2Edvoebc26jDtxVqy+ZgIQL5ifB7rJOorSelFvVc6PhgPVx4nH\nyBiPl8SrH3ubKaWNIeMzGJcCj0QzfUT6fF1O3qonS1goUsXUakydSpJ5c2NC\n6mh8Rw727LPmgI+nToYkWFoTq2Y5NYhiuoh0vuL38lqvJ5snsBRJHul8TBBE\nGsNiLyt5lG3yRce6PqxniYc/TzZhsxZAH1cWXuz6JB+80S/DdWB0STgTO/xM\ntVEfB2iMjv8SF7UqliCkGbCSG3H8wNNtdB3lGmans27Bhegy4pmkC8KzuBXa\nMagd2OGxtgCQLVaHjeBl82k8HBq/7X2exqKaiE1V7XWgK6MaMmX3BakLQjQ0\nDOT4G2BgJc3uxpNk0kYFvDzMIx1s5Pn6zrR9XSFFmFb1Vah2knf93XNMZamF\nklUQAF/DW8ADnZT+b4XYcDfPfX3EDT9MdunoWNX88kayZOuam2ViRpFS6lx5\nG3aqgq/B2CwRZu/59AWAU+22RQ7rnL27E5JCA2COQESrKCrlb0PEbU8HG5ra\nRDeOJTNv9lu1P990Fx7fp5vw3jFstsnds8NkgPoR8VGsOu760lqC/H1nrWT7\nSsKD\r\n=lbfd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAabKpw6EEdk+6TXPZQKO5p4m/UhsBflrkVuV+P4n9TGAiAFNk9hxRHOdkaNifdqeK8sXFL0+0DdLUoHSj8ViAD5OA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.45493e05.0_1596042962415_0.40172206939504096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vpw8g/srbshYjPeeFDcvGkWzi/1syVX+Y4PpqcPSUM6pDq6ZcgUJL7Urjn1+l2FhbJ2ZsDJgFmmWSicwBy6wLA==","shasum":"34446218be0b0710d244eadee9350f4bf74b3630","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.f2ab0a95.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa/xCRA9TVsSAnZWagAAT50P/2vyNzxQqwE4jiAMRVQb\nFUVM4g5cKJzx9JP4KDLR+bUfRTN5haqKOHAXrmv51IetYhGgQs2cTcMxGaif\nBCUQ7xa+aPQeJ6CxMeBa4aKOimKu8Q+MAxOAxpjLvTP1inKtOt2B3CTbcX7w\ndWacYH7y7q/ETp1H92JexG85FNCGwMdEA9VRMZYoPLLyMmuPtG0pIptDaXik\ncf7p6yYfFMOHyDOnkPW4GCcTAZZZ9McIRRbcxSKD8hPYAlCDgEA3EnxDkNIw\nCXTeOvx8WED6E17tYnlSCXI6eeJpDteWSpV34VrQR5eE1J3clzL0qUWlHELR\nPhlnWxwK5QqC/Gg/f0KUUZfeQk5BOoRJUgQmSQusg7UZuOuy6FwD0DFOH31u\nzcRg87hL2WsP/1vTiDYGde7zhrJgUQ6MObDyl4IBagTrpdO9XEuxaEKpmgGe\nIbrTuyZsdCaD21O3dBTiZqRNF8E9UgAsQSbTOWOi9FB1MBMDBz+zehF2k1HD\nyLmMDkPn5trN2UyF2Uu4M0J9etA8MDDGCPad8MsD6FauQPQSA+pjY4QVIQD9\n9x+BfjvSL8IE8rlYONs5UsLZXE7D8QONTkXVHVAAbxG+Di75E57s2cDNf1fm\nXSmphIllWKnqd3nfewWPusSZbb4Nw+Da/FAhOyouk2FihJ7bC1bRkrQGudMv\nPE/5\r\n=OLiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZsME2yao3gnsqZiRdf00bksbN+J5Qux84DUKGpIIfEAiBI8oVMlgX70P9UeLuO425fXQeaI1185NMfXAjVF7kouw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.f2ab0a95.0_1596043248615_0.5855738482435564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.45f9eddc.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uxGh60k32RxwUBT7Pfs7U3MOifldU2x7yw+ZHSJw/y5MJ/E9pazvW1TdIcxULdDu6zkGspm79pg+jU5bObZj+g==","shasum":"6e7a7fbb90b54327c4ac25aaa834769fc71b52e1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.45f9eddc.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIho8CRA9TVsSAnZWagAAaCsP/03+79A86irO3Vuv6Utw\nJDJzOlY9W1D/2KhHZnWoA3xK6Nws17Rk6EqezRi7+xgMQyoH56UOMllCUbXd\nf2346t8oF7xKwzr6z1fjN+ooULO2YXkTsWfeFVaP1owkvfs+X20XyeZghu7R\n7zFr6qKTA/crjfxlNplzjVa/Wa1cxgkh86+IbRXfYPrmVVpvQmNlBxRwf3na\neK/9/i5v1IScRJEANVjZjmnkRrg5VyhdfoPRt+wT2VZnt7DRbtDaiiw5p5Iu\nlKsgt+n27fJnYyUD+JZpdkZeExQffdVmAxeoO1AAks2b6MQLJrB7WyPbDDSm\nbfvd6UA7iKw/0y0cESjwTsFnGSSOAXfoLHLfz86Ql4IxN3yZ8GWsjcPnhClT\nSGzASgFWYCh+R6pAlp+wsg+Nzvw6/4n4LNXI6kk8rZsu8KQTX3Ne0l18w4fQ\nv/adGlq/mP7l2T5C/w6B0QB4ATasM2Csn/AXodYeE4lXh4WNAIZVEp8/kFhf\n0270OfUAAEUkFpPyBgGxT6Y7wMhizLGZbCOhr7qLsD0jCHQ6wYivPtoyk7y4\nf2ak/amoQlrmspJ4xMIHVxan+tGVbghAlvno5GkGmQuhYz1340Q2KxloSkJb\niO3e0pt0mOV1j/l58V2sO532Iz5jVA8k1bVwrKQBc95gw/rBxKs5IcO+j82g\npaz1\r\n=BKit\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXVbH5N3yjhTjd0e6R8nQIgWfFaX9oDqiT3Hrf2vbL6AiAv4Q/j+7hqq9U5OQqtT2+QhgnTPb7l6mxLPEn2YpYfJA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.45f9eddc.0_1596070460547_0.7674683173307508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.b64663ea.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vcv7iu+NR2zIQI3Np7SI0MT0LWQbmTtD5gPUMzABzJb4nAk9g2AQXVpiMuti4Il/Tq77oTjBIgPU2XChu/e6Hg==","shasum":"ce10ac0ac725ccc384e401e956668d5a851fde29","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.b64663ea.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwaOCRA9TVsSAnZWagAAhIcP/j0/DTVxXemmawDZ5Tev\nF6kFKlm/zqTjUVzASjldTYoJgOh1hFWVCbCUGrrpT2RjnhbB9OU+iakKaabF\nISbksxg0W7HzBxFyPAi0crZbxeMtJC76MNZXgpR+MkXj9+G8jtHFsdpFLI5A\nHC9mKk/8IQZFXtsXKQD9dURMt2ibNSVAq75Ow9WhyEppvrQC0jeodN4bWr5Y\nu21cIhAf7aeTjWd1PYknRDvYA97zHynnv9QkFwO8BLIQhRNUXP4qEyMB+pYZ\nBAPGVcazwgQnQbqjC79seiVH0gYYrtiO8NnD4ey4kPSazaMwHoOv/b79Xg5g\nhJl1wyKr4Zksb680hvP26nxbKquqmytS7KJ2FQOdVI7JgCjKq2WupFqgcb2o\nBYSjvsa5dI8wLu3A4lk67WJ8e75o18xs2gYRHGKcRUvssReNWNwIFIK8gbC9\nzfjS86ckZeFKDLbmFrnMIMYZ7xRZ8sFk0iDVJOHp6+2jChSE331nv3L28OwH\nywsxlqZBjw8PVEf2fYUpUPRAkYgSHm6lO01t/2I8Zf0bf2rsa7yZZF3GDqMj\nyOa9/liRBRl7/oNlf/7zB8IytA2wMPSZvSVlOAGBnwOSPZiyBFVm6SZVlhSF\nf45gvSZVFQtP4cdvvbCxl+7VKqOoacYOi3N/hWb6uDtzdpqD3fZauPq6RO0K\nOXio\r\n=2+dt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqNaIUtra8T893YVw6MBIxwWtjsLpqy9GR9DhZYDMPLQIhAIlS2jkg/UnNCWcGBjad9OXTn0z3NGjZEg1lhWJfqGY3"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.b64663ea.0_1596130958556_0.8939972706047858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/theme":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GqqBCQ6egBj1dPGB4azIAJTYiToPI4fImfN9p2ytx0jGm5sgVzimZpWpo667kAzAt4IR5yGENOtxeEH1JdgBtA==","shasum":"82025e62a5f9513417ffe9c847315b6441c464ca","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzWrCRA9TVsSAnZWagAAVeoQAI9IYmUBAxjnpmxi8uSW\nyCDq0b3dDcrp9Do3DOHPvsQ5OOmliK3djaQzj803OqWe1LxxpaQJyRmxYDEs\n9GY+YBJCQzQcWfXwP2AleZUPI9YXkgVASgGHEqxLNbJoUg3EcRhahxpnmBzb\nUeN+5Dk6vcHr2ssqq72nHguIsJQUnvFikJl4azLVjBXHhcX+ToxvqEGWKB3E\nEiPoLA7iW+GS57b4e8ayNw8oCB+sh1DdDl5Moy4Ze0RmpqN1vsBnBiELIHMe\n31n5NYp6OfQnUw6SSSVUoFr0XC/quCesH/S86bF8PSQT8N9ICCWD1bcv74zX\nu4+oAntrsySMNab87Exx9gwynPpdwFffCjkgiXfodPnY01eqyQON7dlsLqQT\nRdna4wYpBw5ZtZYuM24iqdD1zgAaX2sGAGnZyBH7UhmiMg4DAS//VFy/XfaO\nD6JZqQXQ6Qlmig597NIGr3FJFAslgKWiynauiqQ7WVoibMso3/+UTtP/+suK\nz62z904NgfrQs/WSXpr37WeS0oeU8aj7uy+q/4rpGtz3wXv6QP9N1Zs4uWYb\nnKMXXF/K/UGw+8b/RH+Dp/vxucOZ739hsH93esYgoHGmJV0M5nJGo+ryu2WT\nCjmt8O71FgMo6SObXk2dd17PVPNb4jnANRz0G5p/1nAFzuW/siXg+FyRXwWx\nQOpw\r\n=wRlB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDP0aqXmlI+wnEGwtZNYbepST8kdtM+/HcWP8Dd34j9qAiEA1qIhbGBCSYwsIyGBdJZojsKUoZkdA8gLI0bNXg7xvCc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.9a1a4d2d.0_1596143019541_0.4866568711336212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.887c2848.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/theme":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QB+8cgi9d8N81MscXg6kecoTMiE0NdaF0LnFxjpRo3sLndkBObQqB1Csnb2u9ZPBQZDM33nBloUFX1FbachE3g==","shasum":"e09fa11b5c47a657fd572d4f63726f9906c22135","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.887c2848.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QPCRA9TVsSAnZWagAA6pIP/1gQHTHfs+3U/p/pWcO5\nIRcHVbiIegus4PgdYwKrBldQ38pRUli7N0AiS0h0AZsJKBrXmZ+L+N7ADZeC\nBL7vuTOmQXP5+Ip4aDFfXKNtOVpIbkTjgsFeI2huo66PWdfAw4isklc3vu3U\n/N7aX03cNulTX32uUEG0cblw0wAfuIo8mOWpIogeDb67SHTYFT3rXHL588l+\nUUbdTRnKQX/ZrBwuEW1Eoq3j2z4muhNXG+HntL83Z8U/gR4VVcDFbt+LyUdO\nkV/KxxyCDSBxLjM76Um+CUeT42RNvQ4UpeC4+XcYFpfZOTeipSOUwXE7zoAe\n6w321k7BeDN/L/HV+oalC6hAAfk9js3+h2FZFImfPiycbRr7k6jTccaNkMjx\nvkZjCWtLlxLVDWRbDpfcwAdYQ8KcS9VYc3QkpAsUx62aURkSTh3/Hc4bsjf+\nez2gNomrbrvPrxAaGF/SwcTZ0knjqmNt5d8ma8tXweJ0H7BtOgm1/TJCMqEN\ng+A0lCqF9fHX2MI1Fzk7SWT/XfJa1gxhXQp3PvEnqgUBUCvbunmtU/hT6Yog\nUZUWmnTbG9Wi9LKqKITtwA8P/XjDzjBnyZkHfRq9UmYvKkWdfIZH4R/rGyy6\natgwL0W1tMfbgTJPOlUAEdXOSPT7szKKwV9KaOCJ7Pqys7hN69hl91f4wQQ0\n7DZi\r\n=evMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuQaTO0QeW9ahC9ZWO382+mrr+eqTk27YbfSbwCadkogIhALbApDdDnI83T9IYw77DuUQR0jDqKEJenuw4+TSX9y/y"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.887c2848.0_1596146702957_0.7633760141417845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.354eb695.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/theme":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ub/iRsPaE3zDwMNZfAhD/35klur0p7NZlm7K02FJbgprRmS2Jjm5eX1G471Dbqv0u7XKC/2W48z6Tjb/muZijg==","shasum":"04dac625fc8eddc54a0fd4dfa5096935ba76536c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.354eb695.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15hCRA9TVsSAnZWagAAaBoQAJGIQiM8kLrZROemgpK2\nxj7/sTUbcR7xtRdfBdrDez0ra3i1JnMWE4CVOEvFqgpyOx26Xy3Nx8LXHGZz\nCWxS/VpXrBjZs+Y2w4k9Qp/YasKMI1IbUCVkG+JiRjdsfVG4WnKU4xGFyttC\nBo1PFg/YgLvuDcgsXz+CXgUPeDHY8QcmUH/xyKbvquf68I/amz2QOQ+En37f\nX8P36AQyZgTBD/503aThZhECeuKjSamxKL9Czn4rWczgQWnH1JZO+vAwq/ud\noV96MZXGG3+ys0ykMfmXagERKsSTrV7txg6czkcZO2Wd9ER1dH9LduhwDJqx\n4yKe8XKOzqhlXUDT7hs9XWDB/g+RIoC8y+hcudPlftRyRigNzIk6r96y0P3/\nQkM6+fFfMFkmdHr3Y6EjNHr8zlx0O0I+2jmCEAIvNG295jWygQGEIgKPaakK\nOghVs3aEp8pY6rZBOBa0H44TSLNjtxQzGpLGkbMfm7jLoukIaglM5pFW/qOP\nEYZq7JAUKqaBbUFV6velrYplHTfyiOe46lFwWApzJbxV4K89z/2KfOvNImTj\nyjNGgZOKbehYQKqW0EmcNqdfcy43CHcStyCrmaCNt2NhcE7+peICXnZTxOXz\nymz4sVHEyCdaZByFHbHGYJKp6jXuhyNnSbXeoyIEBiHJfB6w7raxrpCgNx/z\n0tWS\r\n=qZQ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbrmCC3KrumMx332ob/umoGIbIZTZU+E/ILhcjzjueyAiBlc0yf+BGrOhdCcgEmHLz9pdA/pYPIVs6eiTtPJs4Ixw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.354eb695.0_1596153440791_0.06493577635026604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.7beb236c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/theme":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1FnzsrsVLDc4LIIQfUmnu5iBz/imXlq4cT7ZMnW/hxsxQbGDHfBnuljFGDf+jxf6jKrgagvcy74Se5vb1apQmA==","shasum":"b8413bf01b9df46f21f63744355bdd7eb0480121","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.7beb236c.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFduCRA9TVsSAnZWagAA7nMP/iCMIaQ860dWAo8KSa/U\n95hyCItE2FKELcxhGdiIFT+vKqrPjdCXaYlaPoPYuSHC51hLE5ag7QM3b/OJ\nT012Zu26sg8xv399GnADwZNEwMlITMQQqihQN16haq7+GwVbB1FrlB79y6dL\nhrW1jhWi27q8Hpp9HO2CsL53LgoyuHnix/V7v2vWxKPzmrPOYo0/Yk29vviI\n6KpJ0wvxr83WBFWvRujZ8hL9GXWGJNKJqeif7s1jQl+7lxhsz/9gg/pOKWzx\ndNI48pogaN6bAbFJIAhcPKdTYDjRDbpR0gfLCO/Tlkle4C8T98T17ZrHhclY\n80nOk1kSx3KhlDPzcNQeBl80RqwD2m9Wb9vBpXA+YX0wuoDaBBQN5PgIocFP\nYBj5yAR5CPs+z8fcY7+XWQJaRWj5sHaLbYBK7CLqp3l+fcjanQNE6JisCFDz\nclgJ9NcGlJC8s4ImAvO+cXhhokNrH3bvk6EudonDLKQiTQ5cyKGPOeqfYCXm\nbEBffO4NDP0Bydwu6NE8hQRneEBWH7thEzBfoudJwfMY+PJxpjGVTI3BfE1Y\nzF+DXeQLA5ygo5An0mD6Vp076sYzcQ4oKNokMScZn1en37WcX6OxwbLANviw\nRgjRF+X+Q24F0JhRBn0YnxuaZfQYRJ5dmvuycadcaRGoQUKK0uXeRP6HdHIK\nDzsA\r\n=zAFn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBa0WrTQHZZhOiiG6UzC2xwHvq38T89i5iDTj01nzLjYAiEA4ICpYnt5MAUr4szu7Ze+0uKGbB8YLLDMEr/mzfMBr6Y="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.7beb236c.0_1596217198439_0.5418451632010186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.c44acc0c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/theme":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bSU3i6Dtit2FZsDIINwrhctyMvt1g3xZ2z3sF25pNLdVHthRw9wRP4RiBMVW1rp6iSxuK7quzPQ2HwdkMWkelQ==","shasum":"e72c29c422c9b1f889d9b54a0827e5b709e9308b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.c44acc0c.0.tgz","fileCount":18,"unpackedSize":44672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjICRA9TVsSAnZWagAA4qEQAKE/8I5ZrBfp1kUohE/l\nC9bW3ZzQAD4jSU/3d4y5uxkFyAGnlo2Evly/q7YGwbNh/wx4kfvvjyimHHeb\n/lR93TyTrKYJvZbDjsfuqcw8c7SAZRwZMZxcHdSgmgflHbIm9ynD+0jYGoZW\ngMuUEeFpfnvSmAUnPhLmOFcdqVFO+4IxA66cpICytzYuIT9JOdIFIQxb6iS2\nNz3qzZ0I1hpicZoC1k4IegL3bQIMRyLDDcrpg+nVgbURMXk0/Jx0TkEkzDmC\na59cM0TuP8SwW+hq2fw5JbAH4prFcCdWr+GXfu1vScv+Ks+qtbYufeQ2vGtQ\nvz9OjWO/p19Drzaa0LdkJVjut8FgZUz6DVT77YzZQ7F156ek+c7IfHkfRELj\np+KPoB2Z3kjuqOcKaj+RZPZ/27V/MtnSDcd1czpVywKTdSxRT84q88hRcOpe\nBL87uXbV+1AYJ5Gt+QDalV3NafvrC8fFOZQONAz5cGK1c7KKiMOaY+//hJrP\nc3jkG3OfVjYxlMmWepbhWwz7EWt3nTRKqRcxtNkUlYDDDrlR/xS6cxv7gGny\nkJzXLVAr2m1bBK/L0sH9xRCghVPi08t0FZiz/0mGd9Eh5SAP10dLMOCjdSZe\n0kn+71R7VNBFH66U7rvHPXsjMIIibA7v10aIpi545xgtvudJqvrpH2hh1OOY\naxSQ\r\n=CWof\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIFCzDXkXgLeuwMC+ekEkDqgRHd+kBiYJ9fHYi8yTr4+yAh9eNjLdySCuvRXURH8cGWOajFXybkmQCtnpArVmCysp"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.c44acc0c.0_1596229831511_0.6285486675443039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.779853ff.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-circular-progress":"0.18.0-canary.779853ff.0","@material/theme":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-naP7b+SCDBz3k0/tl3xMBA252uaUaOjGJO8NBrAYvWGJbZsuBsRcFyqCgkXOg4ujFOrBpelDdEwHQHzfE8Bb6w==","shasum":"75f1af6662fab8b6b24b1bd79bfbfefaa5c564e2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.779853ff.0.tgz","fileCount":18,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgCCRA9TVsSAnZWagAAyT4P/1YYph0v6kqCmv0uaUqF\n9SngLD+8g1j4Q9evSh/3jwo1HcLWus53XHTJc7YD4sQB2yl/4XPXB7qW9CnX\nnh3C1R5XxF3U/GK49oWSannbr65LNR2AZ6y7+JIFHum6+S7drHeTOBDx3w9e\nv1tzJBrLf6bMvgl5v4OPjbOnBT6nIysq0uove3/cDVOffFCsWXkF6uQFR5El\n4NPrBBU/U/GEPNF27TG4rUI3gG5JVpp8Q3DnuCKytcvVNofB2OFuCo+bSpDG\nxNjaqWPFwwuZslz/FXaTKNLV/E9Cc6vnwT6sk/jiMR+3lrlJdF/LNOGlH8BZ\nT6KnVFHH++rWrGOoLs6CgvT1uYGuDRiPNMMsTNl1byKHJCFxmTfb9oCGf20W\nXNSxUh1yT2i3y1duoO0JiPRSkiNYeM1Id1hcSoMCrFwS44gi4+hYlWI65vOs\nO+Ciy58F8bezqu1P+hm4JDCJyGjfQy/3PuVLOGu/feukA5OsEheqvobB0mZU\nMltKcY5/ESUxMwCVDlO86lrOJSBHfwblH8THcmskYOeo5yjUQZhR4Ak0XKd5\nukxRU7ztmSVq5iqP2125Y4d6LHanSgB143vfhba5iNQ+YF7Hu2u8kO/gLHtR\nFu5pgvdY9ccMoIh4uxbjlPrkwEsIDLsX8ipnfmHNU8+OLBWZY5RgvegDlAGy\nDBxN\r\n=Ooqe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnT2pGbJWxv/pxz588Ai9R45g9Gwr4ukS5TsHfYlIOkAiA+YCDH+YNlD14z++m8xOx6YLi3xzCd5ZTcORLNgfI93Q=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.779853ff.0_1596475394410_0.9609763668325522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.8aaf270b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-circular-progress":"0.18.0-canary.8aaf270b.0","@material/theme":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dSBR3a3SWiwniUkgkW5zps6zyJCegrTkWxCYJM9QuYnS/08EDH6J0Cxvpr+xExVyNMXNkT6aFc+xVvqgA1mwLw==","shasum":"d80a9e829b83c7b006a0e33f0d72ef9a4a13e3ab","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.8aaf270b.0.tgz","fileCount":18,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFomCRA9TVsSAnZWagAAGcEP+wSR1fi2alDwoSA8TkSn\nk0k5j7hISpznukf2AMh2n3nhhZotDWzzulrfFObWhUNMh5Dzcy5VnAYDk+5Z\nX2+my021vEFE9v/dOebXnAiJC+o1Q2DqFJHwYpwPWAc3KLrbz1EdtLkg75Df\nuyyCqP7TysnEnqLk6xjaIcC1UC1Yhw4wcHvCvlX9IV4c7/jw24F1sdmm0t2t\nCxZVfgDamZtxbELgoRyc4ERwD/W2/R8b0pGzKu33Y8rumu00NvSYZTnF+zAu\nW7Heo/r16MKUytmQHDxiKJyaJkQm68eAf8t7WSTqMwzh1vQ1e35G7oPoL8Zn\nTYG74h8wMgvrDvuAtZgk+/HC+SkazNNMSc0yY6yVjGcRk/jI3ODam+AccIX6\nagcMWm7sZ826InzdqZRJJlMtgskW5gnUryZz15olbBiUwzfpbqxA7BPYRWiH\nqQqlEOC++PiGb7J5RxfQxGaadkaKN8TLNgc2rKAnFBqIBb9eyJds/QGCB8+/\noW2xJDptEKD8ZYO2kMaDeo1HCiEPh8XZuWdhmKGDk8NflNgAKwKuAiO2Bkgi\nIVrdxHGz+VnqJG2GIoUjHjwC4c2x8WaGUULthP0ATx5wiev6YhUrXMsx4hbT\nDbbS2JeyJEwS5rDFrvMrHIQU/ZY43DbCxCp8PJynNZ7PoXg7wuneSRr8ljmU\nWz3g\r\n=aqFB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExTWgyoGwZy2ZAH2h2iddTYc966iqZfPyVBjfJLTm9vAiEAth7FxpvD1ganaBY6bFiOGk/HGSQx3cwJMsIMSV/t6Z0="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.8aaf270b.0_1596480038138_0.9399259695383717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.5cde9f12.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-circular-progress":"0.18.0-canary.5cde9f12.0","@material/theme":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lD2tULs3ZN7FbfVzotE4Ov8zUWeYBE3bztagbNKne4z6DtqZJ1h6kV3tdHfx29fI+h7GwAyLLu0N/XZDR7HhZQ==","shasum":"a33ed8b2db04548e86d594be27b3116b0f1db0a2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.5cde9f12.0.tgz","fileCount":18,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7uCRA9TVsSAnZWagAATHkP/1DXOAYVwloBoTM39j5R\ne4c/4jjKqWeUoRC0BYwZOXwhnKkx6lEexyTmM97qMY6/GVMD/gyZ7z6FpxBg\nqvl+63DwgApjvrP7MxuREVTgJGlANY8MEEMffB1HpeIpsHS1eXz/OcPVvjlg\nSCKlntb7JmZLomjgmIFQec0vqxWmt6Dt/gdaSADr8QRTsU5ZU1HfnEWrqfzZ\n9TpsIvZeat3jKvaqjRblWBeUgRHj7cEKzQK9apk6aICJXg5jph3tefGGnbfo\nPKNeTOQR4xhkcZlvaAdTOlt//no5n+uHLRq/HK/lvwAGif6LjRdhcm1DGP4J\nGivl5JGeDVYPK9Kb5+govqI40kwO1sLTzDhhDbtM2UKxkIhx7vPrECh07ebQ\nhHBi7QTdvF+t12O/U+cb6ivydwZ1+9++bAQf7cR1V8ZvMtFgKzllf0bsPj3K\ns3QxSfG1FMSNVtutNB1jZzYzXkxE9fgpTlgYfTQ24cCit1FRZBs/wIJYViAQ\nP6VIUsqw7G9bhaKWNj8y8udtW35RmS3mPcbHI7FcaumGN8ECgP/+fgq4NLbo\nGYBzvfw/3tgi9whmpiGPO6NruylpuByTlgOxl7GcG+qQSuhymDu5V5kfVxHs\nd0eEGhUYLIi2r1hEyTg/AXZAdfqTjqGu9H1TZ2yjwneh6gvONaqEDCGeFkLE\nwyGH\r\n=1a4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoGOFS6yfAqWoBRNtXZHPk12ZQLMyIDYSi8isqA3IkRwIganQrauUvbvvsmQS+Ybx7JCAmuKeWF85W0Ka3QPf56PQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.5cde9f12.0_1596481261867_0.15546366708640802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.1607ec53.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-circular-progress":"0.18.0-canary.1607ec53.0","@material/theme":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UKyIyxVJsumpyQXmVVIO05qGBDs9HUDkdHlHrY9fgWrxaSTxXJxFTzvp+gVWKaxSpcNkB5W8BmphcGAUsDcscg==","shasum":"8ac9a281650f3a7f41e4c57f72ccdadf541c56f1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.1607ec53.0.tgz","fileCount":18,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmcCRA9TVsSAnZWagAA1l8P/1R3nYDWK7LwtlWRvW4G\ngsrAYmCGlBJvVTy0MYTCksrSEosbXl5ELTFgsIEcMV3A8pE/hJe5mzUS94qb\nxXrwTsTVjQ3RFncHKvoU8GLpaOZUdrjht5Dv1Fggdaxpvy6PsoNvNYfyrHxp\nEdYqgX5dXS4PSwq+BBFeLQGuVw3POdmQsW6TwD9LkN5720STl9xzPRevUOqr\nl8t0xIRMeol10WQQ/PUKySzWJzfzsFEAMGde49J3rit7hPsV9t99lHKLpG1y\nb3ViLQtakAvPN9IDIJA8V0D08ICmRUx//8wN1J02oe4boHYOmJJ1s9FBINOW\nxRf8Gs0ZSC7N7N8wX57vaVRLZTZo5aIOxy3Lwcrn5u+dqfyMOsvRNRKKUsCp\nLeJxdAS4RYhqIKjN6n49uw2ff9JB1IhH1BvvjvE7RqdqlPohr9Nx6JM/uHzj\nMD/uwuapEIb8PHW3Hs6/N7mA1WPQq7vl+JUpgEKEa9yDqK5awXrHc2vspdsd\nCf0XJl3Z0EvU9aO+OVOsch5gUjal+rWu2fhlXjFFkhWY443K4sauGWBcBEik\nooKEmM1TrFzt3yo7vbxHk1TraWir5qeO3A43kUujpMnPtxkcx9ZkVQigBQbE\naraG3BxZs9eymew7WDqr9V+oH7Q1Qg55gmXgFOnd69+uZShTEu3Aqovw19s8\nGQ9h\r\n=rjgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFdNe72PBEGWtgqo8hFgqYXEJCIqTfvB3IKOC0ejKz+AiAQVXHh1UQTIm/4pmlhe3H4u4M1Gu9f8+AFhwjLM2P3ig=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.1607ec53.0_1596483996287_0.5401968362410998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.678b30e3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-circular-progress":"0.18.0-canary.678b30e3.0","@material/theme":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UTL/+n3wnyacPktCAhdY0mpJgvkNEPq/mY0h2kTwtb6qpVegOaTIT/AtxJFya6dNG4qbnPscSiD0/ySyEMWRSg==","shasum":"5d037dc0e62523186da05d43b9ddca0c28e1593b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.678b30e3.0.tgz","fileCount":18,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqECRA9TVsSAnZWagAAfEEP/1N/JfWKCUrIG2A4zJ4j\nYUOi2sAikyXvFr/pku/Or7AcQ5Pm95r/RVw1kFi4yDgiyg9EhBssr8oG87gs\nZH1fFuQupj6dz+v2qCDIQW7GF8ICVabPvvU4xcXRWS7LLdhmzLg8oZdwqb8O\ndn7iXwitdbN1NChFoyS65O6euXTrefD+UogXCEDSawk9tb2tzClD05KFBwPq\n3Tie1eAeiqs23zfqJIKJRq6fR1Lk3qoVCFCmVDGkevDxbvOTnRcxrc6eiFdA\nrnp8FMf6huZF4nHeC5PDF8KaZ5t9yZDsHB7U1+AnfBOUYxoopkC0EcLN89Dc\n0nwItKsXuyU9oIXMMeeZ8C+VVBmj0+g92iJZODBGmIN0/jVe/AggBNN1Le18\nxAUCtu1cla/UDrzuhbvw8VQq1JWOc07cIyA3FG7tg65bEPSP93zPZhIriulG\nMzyjw+i10PXIojg8m1XWFNXFwYCex6LU5bGL0LxOl7KOgoOQgsyqEiw4E/ny\nvyeEH+ZxVMRFhC5+HZ2upn7q5cnw6zHKHrpKkuewt7qhAnPU6MCqlyag4h8T\nyftlFKkvnXwourW2xxo9fkiyoEzFp77btF/nqlOP0aX1QqPC6BhjvNlS2irN\nnPILsCshEancpF1akVUawK4mLz9okmzzF1Lhn04HrhyCNzYJXB5Oi3fASOxn\nZcZL\r\n=1dNy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6hVRQ2pdMah71p3+7hbaXLQLZV9ZRJJph3f0Z6IRMsAiEA3cghnMXPztUV2LTkwRLq+ms8F4NjVUvQybSutNZb18A="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.678b30e3.0_1596484228303_0.8049884622875287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0-canary.21c55569.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-circular-progress":"0.18.0-canary.21c55569.0","@material/theme":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mkk1Dt3k+VcGMnd2u/UvMhibYWKa+iu6FjQqeVasLIy76q/V1mAYGHjaFFexRcmkn0IlRlQhB59cPhkd0lu7mQ==","shasum":"c90508ecf53836217fa052aec3cb4a10be242f65","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0-canary.21c55569.0.tgz","fileCount":18,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvwCRA9TVsSAnZWagAARpEP/i1pizVh42BzUj30GsaB\nPP86E/2RwR86YqW8T/dWZSAurz+sRjC3VMfahQCs1qgpg6XLL7Yt5TyfCDEo\nfLaahTTIdJdmzf9Vit+42euq/+LpXvlJJkQrlClp6qwVbUbQyV4GpLS3Nt3H\nZZnK64a6+SNWoUUPu31e7JNsWs08OGy5SnW9Mcr4MI7tYxmYJV1bJpKft3Ps\nbuGEHESQZDIMPeXRC2yLzcVnHTH8A5aVNaqa1Go5Kib0jbyzgPOMIh7gMbAk\n+VcS9Dk513deDVsgsEakRvfXtmqXeclZSRzSz9Q+zaYbVn0NbyREOhdscjQA\nnPy8Rlj1vEloUXaxcp5a48neIp/20TXqJtrj917xa71mERM88zrhO0xh2k+U\n5ePv2eJpMHGyBOxxFhUdDY5tcUcm/V5djd+acXVqXEUeiwsTw33qYyodHei4\nQgbMAavTvYDnmppicmxQTXdgzaZAEjNzos/OmoEZwZ57NH/w+UCvTVjd8R1S\nEMkw1qQmhhleJHFIczDBQZLuNO52QL4UnPstyuXekT1XBFZdn5S7EsOTrlLi\nxUiBkJlB5MJjzLKWB5TZctXjrxfDVkrFlscDCtwXCPvGmkczOH6h03VZgSs4\nB34rP3NkG9nFQJ3xNpAPY4iXA2ogtEVM38/fdFL1wW0E6IIGQh4xGa9r7wYF\nGi0K\r\n=P6AK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyzW4UCOEJc0oicLAZiRnLQkGvReXF6wRf1sNzrnzxuAiAKsY7Z3HX4BJ/ZuCtwYRILvBkLl8bG9mSfoX9/nzz2xQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0-canary.21c55569.0_1596484591795_0.061505230492555185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.907d4d7d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-circular-progress":"0.19.0-canary.907d4d7d.0","@material/theme":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Mh5tY7ATCVIF9UF2OGxKz6o2CU30jm0zq+XN7GhGKj0Na5TF7qBMSqG1IlYsSndWnbPb/xvPdzTcXSSFihfrnQ==","shasum":"7b694992f2937f6442f95d6865337d6ec3c249a0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.907d4d7d.0.tgz","fileCount":19,"unpackedSize":49070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAICRA9TVsSAnZWagAAIPMP/3L3rz7up18fhLk2Zgu+\nN8mdRbh9fKvVbcc84v1ZNHjB2+yecg4rN/IJacIwDBnsrRwqDGggnsDsuNo4\nzc74IEROTLDKsM/ihCf9x2dLQHJ6qGn97ygELomDB18R0f7blROxeMx/TkKg\nLSgvCkSDisGS4ApKPOmgG7Kax9+EjoU0mO9D1DwVAL0HcF2RvcMYUBZEHRK2\nOxsPEv25YSXa7Hom95zFYkwmsaiZRKc1yhuWQ1LWJ9HtUodL0zZJ8xFMbenX\npTd3WkpPsLQISBnTY8sMFDO+6+pHhE2XaSCKngz218YejacX0DA/+Ny4UDe2\n6k4BbDJCbRSrxThzwTP/655bODJ2j+bdbmQRFSHpOz6yU4sPFxR626sz1GkE\nYQWJ7RznHHRY6E7AOvLivIgtvjjbRqPe/vmsqFeAZshvi5ZCzGGe0j+MrN3C\nsRCr3ckOsWPjgTrtmyPY+Bgqj9rzYETIB6la1TSymdPMm1F+WFX3C68YukZC\n0sibAMQSpfi2a3rzhOHqdJC3vUkz7wmOtwY7bgf+dvnzU4gY/IPqbbZtVJvl\nf4j4grsBpXRh2JNIccClxJeVkkvQgj/2m5TKVqN8QytZ0mXlTG4mlLB3VJiw\nWF6FyUty16SVM8S37Cov6zurYCxRENoVKdi+n9c2DcNUG95C0OD5v/9fsrwB\nJU9w\r\n=eJJ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlGUDXjNyAjydFZ27n3CnEY4irScHvEyS+HpwK5U/v8AiANFfhVoNDXMbPyVCoTCfZwpbvwbtlllnQ81ObHhBBfvw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.907d4d7d.0_1596489735927_0.8186499250413475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.18.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/mwc-circular-progress":"^0.18.0","@material/theme":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-1MVF+sMqUFBGJIC/rQx+dkxKO7XhnBwKMPDps5WU5F7MEfB+JHmtOtec+wG1G4wDdQc0yweHIdbCaHbca7iaxA==","shasum":"a4a943e1f679954c22e657fa01dd1df26432a215","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.18.0.tgz","fileCount":19,"unpackedSize":49018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICFCRA9TVsSAnZWagAA088QAJ6CAyi1/hk2L2AxmBtg\n0EkApK2HMKL/PCVPTrs/v2VSTWISTdoeL2opaP0VfoQdztX14oxePBpAcOgb\nTX50FKM1ZW1cL7s5a9ZJbozsY2EaeknbZ1izdA1o0IUtHhT6zD/ULl2t3A6p\nQrIe5BG6URXzCPu9s4AXVKwaDQ/UnwkV7QIhcrFHuFRkXeImb574buf+w4lQ\nC23zKOKlEDbAWZaxEcjl2PW4KU/Y4fFMsOmcBAL0p5uQLo829o7waiaPxilQ\n8dYh+30/sxFfUkI7KB7IawZtYTWAQlv6PcsVw7w7vM3OmDefevQ+xya99lJ7\nESTSlM06hWoYGIkunb+R1ao4kydWo0fgiJRctpjgKWmrpENJnl9Vbc2cSovC\n8FzUkZzmc9CMGVzQHSuLqyXQ9CjD4tU2H7T3DMvhrSuyK/QYSaQKZ3XzCJCX\n9dPL9TEEhTQ6S0FOcKTVOIHBQSr4X5TjbaNPrMjASD5GxjYxt+yGZd94MNJw\nF4pcFRC7n9b85sAX5PJNXz7Q/uKXNw7tyjEwNWpU5F+dO39P4MkZ710ii8U2\nXfIH2/FV0c/ENPGlpSkQ1ukzTpRvgnD2qnlaWcvaSIAnsBPrnL0n860Oakui\nOEIg7YEMZy8Mjvq0OpMxqcWYbEXuMynAMVFbXy0gVIAJxEV0+v0zJXPqK/IW\n5YIe\r\n=PPDw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMZB7W/WqdA7bMFlEBYTw4xXH24D6vfySU2KivQQqK5AIgGDN4o+PEsISL5v9SMU5kFo3wvIWykO8GP8/mBemcoMI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.18.0_1596489861591_0.08280001302387174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.f7958e4a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-circular-progress":"0.19.0-canary.f7958e4a.0","@material/theme":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-65fZvU6t6ocrfRKxYQk+W9StNiQv6Do0QJyHFXRo2zT9jMLNSSHOJw6pUwuImFFaKzFOOofLvt/tqAymsjW7MA==","shasum":"7291b3ed34ea942f33f8e2785802167b6b4fc785","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.f7958e4a.0.tgz","fileCount":19,"unpackedSize":49070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMK2CRA9TVsSAnZWagAAtFsQAKQiwM9sFP5qMshIodlK\nbYruLQiRuMUY/nhLfI0kz0wGF1q9SkbnxPnvKpmSDZTt7LsNPWqOWQwZ59NB\nrEqIc3eUa+b5KnpaM5enBNVb/jStkPeZgKDXiDgVVFHcKOSIqQeEnSJXtzvr\nf4YNmvmuLd+/u3myIdAcCHa881E1NEh+2q01DZF62BwRATkkhR2eMTWe5ZRR\n5o9Jo/yEnxqC03nrheDLlw2XbmtniQ/4VPReSe09o7uS7S7SA2IeUw0Bcgi0\nhnw5KNvrK+M3FbdQJ/MmA+tiUVNihEQSaLPc2/kIR3IjbrwGocETEJAUfEvZ\n+6j06mKo1m8atFU2UL6AOC2txsw04Qd2gKYsDpyFBaeXnF/Evbyoa66cNlnX\nKspi0CHH36vhsCj7xCMN08iHJUXNEgclQ5JkifbvJeFFEWI8kRqVO/0rmqOW\nszuW/u7k2UrAYulP/8H0oYmA8axoWha/Wj07uIqZ81VmwCBhRQAQzeerMDPJ\nMkCpgvfEtQxl/+UYhGH3g4F2lH0EfMWGLUSXswtImxaK3ag3u19x34LXR7kr\nUp8NNx3eaJ0BeBnH9q/S3Rn8W60xHdjQOyD3LM8ZvGEG45KecPvudaeq0sNN\n8uF+IfqakCzYy3m1UTqqiDfWYgAtNJZE/uPCFBPe2nK4T52Ti4nxXF0khCA0\nXFnB\r\n=2I96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ8dHTgRh1af0dVUWI911SlDZJ6wKLeBVIkgHbefm1pgIgWr+Gp5za6UawXcL8yOKMzPIvz4hMRLQHOodi/o2xTWk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.f7958e4a.0_1596506806076_0.3315688811076354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-circular-progress":"0.19.0-canary.f8ceaf79.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aRpq9mtASQhE25CFepKwi4XFoG0+sQlXovjaBh92WUMZGqZGRbWz6AsJOlthWRL+hS9MMYRXdyTqlWCvP/ltsA==","shasum":"4a8c6b084a4c5a8b9b7fc751ae61e718296a24fd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.f8ceaf79.0.tgz","fileCount":19,"unpackedSize":49070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRqCRA9TVsSAnZWagAAMS8P/1IkgdHsSUr8XxVZ/BJZ\n3lp8uoGdkx7oMQ6G/yzTQgZLIfMyLG4wT039pYX3KrClcolrijeW7Qd6sKKF\nvpzD0UHvbeDUdZbin+dyCTnzdWIpYsthlmp1bIPY/YHSPNh3McO0X1aiePh3\nC2m1cixQOBUkkwRDxK+Gttwvx0Rayxkv2uDrx/MCKlFIReDZUQarC5x3iNM8\n621VPF1/jeDfDewUWixywaKg4slb2QBjPTpeGDX9JDrdF6B8HAzT3EZ7lvCd\n92t29AECnn3IoC/qfgp0DfQutwP75tNwWsd7on3LGVdQ8qIbdIN9mNRctvLz\n0JMj5uyqikqTmTE3qd044NdA/CBKPnnDt6E5KNVeO7tkU9Dj1piOVLO3burF\nm6R9aZZZheIfZNXKtTD1Ry8Z/s3ovwSSxodDGFW0mYdqVpurXoJpbrtjiByQ\nxr1VdRMEKSrQJyGaLKZgZZzghyPeYPazfhqaAlq9xnym//qlr4r16wlb0O03\n6rRPVkzhtMMCVTIbcildJzE+tb/sePno0gEScA+rXcgfGC+1TF8UCQnIq7sI\n9eftpVQcxjbhTmrInmgcH9kl6WYzAWg9U6yIGRfJOyNbgoLqZKfEt3UchB1x\nIRKI3sAUAcGIugCBiyu0p2+Pl3vO52aGkH8wnzv847bfLLLl0MRZ2eU1qsJT\nfx5m\r\n=UQqp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDWHC5apccJKyf40VJZCVMT0SP+92umvJzDLLS/u/BrAAiBJ5canj0ah1AtNxj6TTUtk5+9STPKsf5QaDTbVJHxXaw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.f8ceaf79.0_1596568681616_0.42252084832160164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.6b9e385a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-circular-progress":"0.19.0-canary.6b9e385a.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dZxbfJq6PUqVgUj3JZvWZGcnkGrwPNFtC3vwngIMaCsT9yPF5YHQrOoA/ewdKptfIn4BVBvJT6TCDTce72+Gfg==","shasum":"a092941b32408c946c51802695e0831f8b4fa495","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.6b9e385a.0.tgz","fileCount":19,"unpackedSize":49070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNECRA9TVsSAnZWagAA9rIP/1xZcNeygr6phMEj/BDE\nOe1wrdTEIVrzu9PwZe6gJ4W+EKITTY5z1cAryZDjlFqLy352AkbU15uCMfev\nsz93UAkqp7XnvgXlzsT5x6S9i0DzrZuVYBADnd5WoxywumySR2WQDUrVjH2v\n29e84dXA3w3DNZyVJdWGr1RqHxzFskNiF54ya7+GoWmDiDRuQwJkgUPcqIrg\n+GFvuUoo3Xo7wy3aOBw1om4w1R3AWXONgbnJ7FUD1U5qnJf3/qbFQtLdlFEv\nFngEXTAM7WhRugc4C8zrdPuxPn1rpEL6q3zO4PG4UMr1UoI5UxyodKB0BVRj\n+auGf7h+2vKPdp31jPbZqOQAsjmK+UoQVyBXG5xfLKRqvNH2cNqNOD7DPYzD\nXBsHQb1AoX7mlhEsugub+xwmSHRKhWfHyLI3j6w3JO17qPZzmLAx7Z+57Rd5\nI4tjJVuBnX7R8aoImpljxr/2oa2537kXihqU5QXOzkDlsQnjTP0u+ybtbZew\nGWU0KPW0IPgWS+E0P50P5hdBKrEyL6WblPWuWAUx5sHwl37LdWXXmvslsDu1\nTxX6wyWg9G9VP/Q0vDyZTkGZcXjLRxi7VGpj8PeIkPBhKndTtSoNcvFBR09n\nD40LBTM6cubfVw5lOC+JmmHR1JTdilOBqluAOX0xb+rWWFpmsj7Ykysy9HI/\nW9Vr\r\n=/VK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEvPeBdUx7K8azb7wYQl/T9Xn3dSTlcw1zZ5Z7sAMmdAiEA+6kCwBjSqxtxqPjq67H40Rd8sbNVwTp6U9/BhRZVq2E="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.6b9e385a.0_1596576579618_0.6681630642621252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-circular-progress":"0.19.0-canary.9a7e6d2a.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BFmhPmNbRyfD23xMebL+YeZu+mggI3P/988SbzX+IH9J5An3hXH/SV61EHfwq3emiHQ4hmC1ouktyvDVJqGtGw==","shasum":"92913fee94e55ec0e6544dc06f9f8bd99e4efe02","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":19,"unpackedSize":49070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitwCRA9TVsSAnZWagAAXqQP/3ik/oSM++uVdubM6Wph\nv5XHXuhRjgJ5QvaF/Dpv+IPvhmB7Lmp+lI+ZElXKLurFWCtgRy+Zj2axsBb6\nOqlAb0iXSNmhKzrBOYYFK5qrdd/mfO8exWnQlUNOErs3aSPQdsA1Tt4CKmqF\nU7k0ND4/UAYu2Tyfu7okdyMpGjURRhNoifH5n0Xc7sPOtLTtABcbP8Ez5MjD\nXdJneVgvMPOcBHmyBJKJZ2O9kkRDScXXcUHWDw+UvbHAVypkqP6oCxeEnbnU\nB1ETmjtG9U3w63lBd4uyKIeLrZKDXx2cql7S4CRqfU979XFEKp8+GXUS1Mf+\n14P4LZXmKwjppChWEYxpqsVZzgXOOZ3DMFqHcbXDvBQnQWS7gASA5dl0mI2N\ng2qT/Nwlxpgm3K8+tT5/PT88oobWen4D3UtVcuxSmizVn89z9yuXh1lkDSux\nqlm0+K3COsbPjTiK6MpAm8qL522DBNZWbjie+NEKKz8PVoKwMV0ZghtMTxrk\ntPBPfOt7CXnJbFnhCi40nzmXxnvw06dDRl+mYPlRZ78gUc0pWmjnA+p3hbdF\nho8/TfuyHUJovjmH8Hto/Zf0apefAyBAH1vh+hqEtS2PLbAJDptOxKproPKi\njBFsb+RoK3aa24JkHGfqtGJXImE72FAXL+bBxx/NdM4MlhzDvnyKf4U0l7fB\ngHeO\r\n=tWFI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs7UaPE/iKB+pTFb6s4LHu73X+mb3Tw1kk86nnYcLUrgIhAPBGr+pwAON6T6wuSqGIpj49hwHYifCb1V1wtw7Jh+Ek"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9a7e6d2a.0_1596599152090_0.1905054136875186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.188f3f1c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-circular-progress":"0.19.0-canary.188f3f1c.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ND6CfLMS/5ykCj4pquW9Vgn5P5jMjAsM84E1UdJmVPww/MqL345hLWYQbdqf5u0y+CrV/iVz/y5vQkazrUMoQQ==","shasum":"c8a328d00f83733bbaa3fad7091744c2b5cdbccd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.188f3f1c.0.tgz","fileCount":19,"unpackedSize":49183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbACRA9TVsSAnZWagAAGakP/j/Mo9iA+UqiLxclrplm\nCibZBR8CoDu/YVpLOU62mLLBXZykQyssvLGpFykdsi0x98CsTS5gEXInZf9V\nlvGl/PPmxfAHzfogHRvQa93xZSRX9EPJPiplnSFs3VDpBSC2EVxbisdu9/vu\nrGX/851B3JNA5XMJx2A7tT6O64tFAN/A3WvDAkTjKHN6q7OBkkCQaJ0weS5t\n7puTsNS0RFQ4RT6zT/4AQnR7V1bPWygUFXnNL7qTnIfKtrN0OIUcjbIq+p1r\n9cJ3fSY8QXo9aa5rhKPrSUTJ172IVcze7hKySa5cGaPVsxo7ABiD2Wvefs0J\n1yZiY5gEWO8aF0J6GUA68jwOfO8EfjelKGCO9CzxwE1QUg725czXeCZ81jEe\nrnzd66JCXM7Ud5paiV2HD/frOe3LOfbbz7z3sISo3ppez3+aepbrsGh+fTNj\nXgW5nuVvI4on9R03wLyZaYjnBGgaCzMCK4ZRBhlWx6/YQDaKKKWHvnwHmoaY\n8e+THXskHtTPYKa8BDvm6og5IxNyN81aeyizmRFpRKu+yK+R3TMTyxRs8NpB\ndQwYIC1jOYPr33MV9VlXoGL+iSKU2aT0V6ocg+af68r43zGlB41QgOmpXnax\nf4sw4gYncbqalndAXyF8EpJq8ZVEU9qvxMNAgQrp2p5BmIgEgcHUItVgYRQ6\nkuc0\r\n=TtiV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsJeMxP4hkTw8MMA0oEaU9WZxA0gk3VshTXLBa2kzXFgIhAPNpni4HeheRbjQEF8ZK0N+I0kNRALYo612rD5q/Z8Zw"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.188f3f1c.0_1596651199693_0.21216898507517934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.b6106add.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-circular-progress":"0.19.0-canary.b6106add.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-p98MWwGCy8/wiV6qcBZ0Tv9ZaJyVVPMhpuTeawxCIWQW4ip/gLE6cjzuaWE7bGO6JapzIw274Y6PdTzWH8k8YQ==","shasum":"5e1f326515c6a32996f9a13e78f7f6df6caaeed4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.b6106add.0.tgz","fileCount":19,"unpackedSize":49183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtNCRA9TVsSAnZWagAAk7AQAKP1ZrfvQA11ua43wC1+\n2GCcz2L0taV+Kft6eKkBN/tn4rt+tJsrawW7Anw/cvrAlDwcDbHkUB7HZXMC\nEo5x7sRU1NI7vB+taiiLeJ5DInBhCj4WOHXRxSlQRda2lHeuOxviZyEdq4u2\nkZ1oFN7d7tFquViwgk3m3zAjtwN2x6kSuWLzE8u1Ogsik+9wuridhEUOpvmZ\nmI+o6fYiqoEivYWG1TAetqtBCweZ+BlNfa50dcc4fzZJt+QpcgaS+W0MACQ2\neYBV6ed+jX37KGa5wmTVB0HO5l6WAlsQpKnAxKWSBZV3WvhHz4SGXhfolsGL\n/VtIm7Jk+iYPS5xDvgV0VrrwGHGG+fImEG+awMtCW5dPEsDoT0dm7nXFM8jo\njntOg06a9nMOqD2DWaei1Dd+tyEPcpxlrSIEQUctGExDCEjinK2SqRr2sfrl\nSSuMap49daj5hIMQvaQCq3tCSXgTER3npKk6cDY6a+ru81q1HcO0/hNvlGxx\nAJ7enlcZ42NawPZfoNQFFHsdmR2HVIBvUXtgFhNI1W5I9x7eS+ACaJSdVcUw\nzxROlEjNEEpijPuKYGbWC20WtmuopiUl1y2O+XUhOlurnS0sbuY5X5Xf9ZMd\nVChAOSFMXB3XV5uHpJNywQ5NcadSrEUtIvfVLTR+Qjt1KoJWSs1db4qKcylB\nPwk7\r\n=JWdm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkXUzEloBfJzZarjWccp2UYd3kgBH6Tn0kh/u4f3C5uwIhAKoOphFL2ZuLwmxqst2NkhhIMlkYjvbLabEBjDQ5rwiv"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.b6106add.0_1596660556617_0.318131427280802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.ebb4c667.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-circular-progress":"0.19.0-canary.ebb4c667.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oLKV74nZ2Ouxx10C78TII0envqfY9bolV4T90yAkGcYM4H1Im2VPb7E9HKWxFxDTNRmxkwlj/b4K+cNFvNcOgQ==","shasum":"d846cb992b553967fa9c8d21912debc1694c1b68","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.ebb4c667.0.tgz","fileCount":19,"unpackedSize":49183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xjCRA9TVsSAnZWagAAaQ4P/055fx8iD3nVGs3RUByw\n31humvA5e5mq0h5RUHBqpjRI7JqxGCFbbJFOGYkn628MD/a3Dz8yKJhSBOLn\nfPjkLDU4gOarZx2mRedKYuYIhcMYGHZziXoBStzLx2aSJUVFXyJ73onAid3k\n2nVec/VrSECKswhCppP90wojiO+rTI9KSCggPYfLB1NevpSbWCnqwVmNaXSv\nn3mXTLDZv4UfjfXbSJDZQvJ/zlDUfjWeb8dQ5nCNQz1LeR1MQkb1S9Xw2+OV\nQQDECCF2SqpwY6fL10pljOf5sgtA+JMhPxhTTg33+qs8J+3LpIvL/Xs8dutp\nfZ8bMrk6Gps8xrEPa4ZShsRABryndFbsDJrqSaINLSTCbSf5tLm3OUbFkhVs\nQlofV1ory4J/ke0+Yj4bqN86jgMcLzMQCX+3lBJ3qn2xp07O4uncLZRlRnYx\n2CfrDElfX7oP2Tw/OY/OgRpaXX0AN/7wqY1vKQko8t0kdzcCbS42QJVQnKra\nEDy8asduKRuR+QhiJYrejmHFp9srOjYQzundjxuM2IKaIO5s0R/7g5+TGBAW\n460ocPuM6VCZB/9hZg+lIgTpDOpUtcK3VKVaujNElr+5GlLPIbokvdwPjqze\nRT+sRYVo2eAaeJbPaDEbYO8zbbBq+hWFzYhfaVSGmKfGV6DocL/0PHUCzyXM\nHSMF\r\n=hQf7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkAhym4n+qjNwFrlwUwP1XSGaaf70C3VVX6/VLh+/ptAiEArk0QdoTHG9eVDXhIwrIe+MJf3n468a0obMCc74UtytE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.ebb4c667.0_1596673122652_0.06134436383359643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.aa44289e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-circular-progress":"0.19.0-canary.aa44289e.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q1pDh+ZmOzbIXsj5B+5u8houbQGd6ffsMIlVMQmYGPR60GHk3lc4u4fyLZJy7rMTfksi7E3V0tR1szo8I44WKQ==","shasum":"feb4457df0e42bc1bfda59a20c913dd1b332414e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.aa44289e.0.tgz","fileCount":19,"unpackedSize":49183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuHCRA9TVsSAnZWagAAmt0P/i01n/CXvBge/AQatvxI\ntiIJMy6TxuyUv4Fox/WGCImF107h691hLUfUeZYADn+vVadWT6yO6/4Pq0A9\nEgiuedsLH8E0KqNkMm1akkm4HJaTm1eWkmK611bvcYYNQQr3nKG5VITLlHiQ\nxTs9uAmIu6Zg1tJNHHELjMx96yzspPcodIMgGBgqLxpNTcZZSqxMXzXkkLIO\nwwsFtJxGpFPMKNTbTHANIfUwTRydM5sTQ+p3OmHA12oRjnvYTZS0f+V97qsk\nSyTTengSuAVcRbLvRIn8MUslTdwFR7b0QaV8tVoWMuVyjpG/cfOR2nlJeUAQ\nNBrq4OItkNlCv/DbEiOgnQzo50JoqnP53yUBISu5WVu0Ewn5LHGrz+DDnRuh\nTHNCpVuUBInX8KPWjfa5bm2vUmrMdVBxmBhLlkKGS9a6z5m+trhizusZqKX+\nSVJJ8N8eZ0Aaoe8BvjmkJO0LQAl4j6+PsgCmdv+FN15LzRmL0D0xLcTg8lbc\nuDImZWOC4BTUVaja7LOSDUNVVgBfEZk7XA90v/skalkrQEw1sGz1bFFwp/IM\nkHQHV4fd9otLq98trWdNR6ycopJJAr0L9FQxFLgvOkQHMlYvne4TSnIqIk0k\njE06ckUe7NgBPeldtkZ8cA5oroD32vNuQQ5ANbjX6tht0X46Xq9hh9oNCWoX\nPFKc\r\n=0R+y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzSVN1ZqIxg2MIv0q94DNx1GieH1synGql2ANISOOl7wIgaXXPE086kH5Uoh1uH94Nv5kpw85E2g+ENuIpBtsvkxk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.aa44289e.0_1596738438813_0.24199629620177165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.e6b0816b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-circular-progress":"0.19.0-canary.e6b0816b.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xXG2YTYRTQmLIWbzlJSDeErVN/FPkC/Kb2/O4SbSD2/slkfY6rJHHJQIBi3fSAeEVbGKnL7uL2XndzfH1kD79g==","shasum":"8b3ed204ee368e321565a9a691fbcce38fc0e99c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.e6b0816b.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDbCRA9TVsSAnZWagAAepoP/j+TOXdttyO0aDmREBZM\nT59vy3eFcdzfUbLQkWD4ZHSS0M6ewMDxwTzE9hYYD57t2jjYNqvRkC4XuUjo\nAhnYI8EPQ5kqFzL4mZwQbFKHXpCfnf6G7Cap7bGeB7H2l1OxweR7teAhuATA\nYudPF74kI5H7HG7XKFsPhyLPsKL9RT9K84VYr6hMnBJdCOFd2NYb0turu8QS\nDMRqfpquMiE9T5zN5lQCwBf5hhKnFWlaCQ5nSMc+ZWM+8+cRnrcphoopzBrb\nz2ykEuIdwVyu7NPtV0jBtZyc1lI5u1cmnLrxF3B/8fofAt6dFNMyWeZLElEQ\nAWGl931e5iWNMd5r1awLUolllBGKlFs34X4/tm/rbo3nddcXsjJ0UhjyyUOX\nJIygJQ088fyipe7NcNwmgYQ/7Y4v1CIaTzpKt6nQ+4oMAOyeZFkNYRZNez/Y\n+hLVB0eBmP8iFkOTcB03RZ/Cp5MUIsKEIGhwC3YSy9GEH8ya+yIdrz8M4ddl\nJFFP2DYSyLGGt731IE4yiuJu8gy9z1AAYddAT4Reb9H9i8BNkthDgdQ1I4bG\nnaLa0ssD6B7DnWPS6tfc7RX3aB/gsc9kraMY71+IhHo5gaUqTq3qn6ksoD9n\nJ1Vkuq7XBkR6WU/DgUQG6gaFHwmy33+QWHjV0YrUMasrPy9hSqWDcYcbSzoN\n/NwN\r\n=AyGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHijLcWMaGLM3qv0bfgXkgtFNRu2l/K+XJsPahsVIqRgIhAIuRibfbVi+MwBrl9dMLCBF6+s0XcxSXNHB8PIy+Rg+w"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.e6b0816b.0_1596825818942_0.1681625398130253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.96d15938.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-circular-progress":"0.19.0-canary.96d15938.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jhAJC7tYTWWmtiIntkpcXng/IX6Dq+5JLQCc1yeQvG1Bya+zu6DPAmC77Ec7tKEOS1+WLF9wXuR1Jco/B0DhOw==","shasum":"79f835b92735c670a9b57c0d6ecc4d9994ddb1d4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.96d15938.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmACRA9TVsSAnZWagAA2IoP/jVD9RaGBotoPU3oHDGV\ns3pMFVSetFPUF6hK/VcpQyNx6AiF+ONcWxOTyVYo8R9d7wAOwUA+tFWvFCsN\nvn40ER4iqWoqcSrtTU/GYSsoRlsMsoz+ZHgJcnZmz/dS7SKt9Gqbt35WtF1/\naUc5bwlPPNy+khup5LXmodAc/iylk6aFeESQCkz5MC8KrpZGVtYBG8OTnBjX\n+qCozzVC0fo2ROfNzEIGynioAnXREMniV+7ydWdGgdECaEAYijydpm4mV64/\nXjZRCfYUdD8B1mHji0up73tjSfSQGFWzxFrj7vCncswCLBCyN3lALMeHZtKU\nl7wwPt7ngS+xVUk7IOK7P7t9OD3eDm4luFGFHRIw4IBwi8WnZlMOT6B7mSTq\n8WsxpNkiw6QvLVOK6GlO9Q69qvP+sMDQUjGT++wI7lBC0+1rMf2Hr1z9mydE\njCiVFCAAg0RN86vKhQa+dVJ2VgL7O9PdXz+iLsPDt534LjIr9biQMbi55BB8\nh1OQas2iPg0eawf8WBQiGF8vW7v4YWkUB+co1kgF7UI3Xy7uYjTfskwDzo1k\nN/5Bh8ROPSqJjq54mlEOMOhm85acA4tj0orPZxWrdfXheCf0QuJCLRQbxyQ9\nD/9VeLqGpGlEmOHGcXzMwm3/+0LA4/iXROaskqbvqqaIru02k6IaErax8gXR\npVK+\r\n=lTnF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+FPOI6SDDwOAqjJCPtfbrExEi9abNhYsrtgwQiEueqAiBoaZNl0cSFMzB0sfB1QCfk3GQjowiyw7KaprpDxtKHZA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.96d15938.0_1596832128415_0.22777326392811847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9d991c8c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-circular-progress":"0.19.0-canary.9d991c8c.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Nqr5DeydkB05P2XkGS0KwyNKp62qNE7djHTHHVAocbDEgm8DF/dWBnGU91wG7LEHkbXyULHE3UY+FRjUufRBPA==","shasum":"740d51436b6c507915b2de25dbd7eac2f77d66ef","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9d991c8c.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDWCRA9TVsSAnZWagAAVRcQAKA7dXWe1teC1eJNd3xk\ndlIQoAY5AyQDZiGLacU+fCgP3bYg/HICrBVwpzeBMb4F24SmHyfM6/9Ycxc2\nSyYGfU2tGvyrtVqIOu+actAPsB94fVqyRBioQSv2d6NYhG8Txk4nl9HyH+l/\ngkJUz4Uk9BQi7eIWsyN7rIpPf1r8Ohp4t/Xg5FFVOM6QuLN0eoF1LL01NQGw\nkWGfeLEFbqD4z6T52CQL2k4ScPZW3draNItoFscT9Csylb50aaSYksfBk4dT\nnNNRPMtJsQqnQQVSFsbsxf5nC+snGdNgk9YYBDgiH9dNtbEbGyg6TR/7AS+C\noblz++mCC+/adSJoEV9X5hVp0Ekmzxt1s9lOjW5AfnW8aGjXdWncHZPS0G+I\nwJuJ3HSkI/0qyJZkHRJexqOkcsrjxAMjpxul3puZaY8K9b+TEEFloel8mysb\ngQN+Lslo0DuzSxs1H7a5hRfPCeQf0hfwV+3WSQsbe1axS3umzAbXLNoPsEBh\nDME8r0Qgg+c2hial7tTw91Z60vq+3rSEV+zF4Zo1+9T90RKmMjXfRMR+9wpE\nC4Ahh8FegF0t6WX5qz30u7++vD+8xtwYwkRMCv1X9OwgIYrbi7BuFs5GU9IY\nM4Jb6LkA3MiJ50xVPpahAPZB4CPONCLEzb+b4+ZqH4BAyIFKnmsvHPQ+Etfj\nJHqA\r\n=8Bum\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVsVdIFUk7EBArOKDcrnTl2N6S9PF1uET0nPCZ6J6G7gIgFYlgekVMVfPQTr+dKMPmR8S/FVgaNY6JzyzZjSw3EDk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9d991c8c.0_1596838102346_0.049332745570182635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.13bfbd72.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-circular-progress":"0.19.0-canary.13bfbd72.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8rRHYjEOGxbnLTozOmn2l6TIXNtuiDHtkLdPPXAsXd+c+9A0ivhRYaJ2eyQK9XU6pvtuDEeFuHCPrMrBs/5JPQ==","shasum":"f21ebbfbf64315a93a2bcb7d3227b0e8165feb9a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.13bfbd72.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+YCRA9TVsSAnZWagAAGSoQAKRM6rcXxaEwzYqDrG0S\nOpi1NLvag8ktohw5QzVb/H4arj09YMhe4g8v8iMf+lzZyEq5ficOuU1iK8R/\n/JS4O1WMyv/lKweHHzCWVDhEWaHoHwQPCfvR7557v4lMPt4gk8R0u6T2zKk1\ngYH6tOv7dknwcerH2YZtnvk9j5mMnN2Qug67CUR8ofpKti65PxP8IYhcOgvP\ndUOk94w2vGM6w6iwgRBHpvkxVE4lzalJPkHNbQy9vLhBU+Z1QfK0X3Npn/Id\nruWmJyL5xhJWxQbrj15LFteKL+YV2ZjUU1mhtg3nPFSkfF5bpcNqzlIMYbFO\nZYE1inVCqgEC2B0HbAsCpWSDcxwIzJZmKCup2Ho30XAwe6uJBA9It+1rI7oJ\ndWVxl7nt/yTF7jZeIPKVcPJnvU4XpszFAuISvDLWN7oQnKcmJJGR8goA9Yyu\n+9+vwt3iqphIcA037O2j3ni2Ls6kbIp0drov5cbD5oikAuSz2+lyQGzpg3ft\naDFXrSR62XuPl8xMhQmYdc6fNVCoHM4rRXaTgrOQUqct2cHeekvzVRMgVeCO\nDv9Mj3/0/VGxcWoeMYXC2Sc0j+5wEA+j7w2y24fdzOlsHdAXOIlivW3r/4y8\ntX8nGn5NxCDeKn67S5jfMOJ7cqswfVogrBZUiTntjf5rkZmn54L5kSbUZcFf\npTCc\r\n=+dit\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVPZfkT6DCWGiGHF+LYZIrdGEuTzfcXxaV9e/YMcNTpgIhAKvz3Y7Lg1M3zEUZOkjhC8/2calgbHsyaiJ58CHSLCoO"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.13bfbd72.0_1597087639755_0.34568889181552964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.30b1b258.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-circular-progress":"0.19.0-canary.30b1b258.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9bsUYcFMB4dTFoNhMVh9Eu7rWoVlSpgkuTxfTJNCdD2M6LHpZRIKnhUhw3mdETQp7lMwBh9X4rVKpTbv1OuI1A==","shasum":"4662dbe4007a3c61bb2c144d2f129945822a61b9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.30b1b258.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajdCRA9TVsSAnZWagAAK44P/07t2GaCw/9PqcYslhuM\nXw65B5QKUI6R3O1vMMzOboNHPepfDqz7NYEMhowVIZdWSwN6LyWF/unE3ODi\nFZm/Slnm5u45ew1iW4lYlGIbYDyLj4/6OuHdLiylmJfHTajJvAkSo7e/rnJK\nQxPXIYqfV/68860/XWFIJMprW/i+KB6Ew1kq1ogNTJQ6jS8a1UJdHhSup9uo\nd3jaVUH9mCx+Kyfjh9yhF5tvWf+N5Xs70J3SkffkuuS95kKzGZSTZE8Gxhxh\n9swP0HwJulZncwizhZP1GzxPniCTPDkqH4zW+UJmt5Dr7Ir1GAjfCgLhBLBx\n6BiaV3qRvFIhgOZ+nQvTN+8NLDygZLc6YvqbYD4Fitxi3n42FF0XdAlK+ixK\nsh2Bat0l0K1k5wJmgrIqBUoe0bHyfFjEgdAe381u5jw2MQ+IWqPAfxIrvPqN\nS4i6jtMSdBFUCLwG4bK7EdhWCaHXDwcoEiU9DZV26AEnhyt2jT/TMS2561q8\n9IEXOX6STzbMF0QBC/aCwa36ILgRtlDstIHxutc/CE9PNIPYEjutEo2tpvUl\nbrwT826J2efpsax1vTjczCxHtf9tca2AbvY0YzQUOHz6GCnP4z8aoRi7XopZ\ngW8pQhTL6A4QVo0kVBFtCuC8od8zCgwOVaWW3MfcrEKD0BUpJpTMdl8jr/8V\nmo23\r\n=pgYW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD98NB9dZ3A2seoTvfqmxU+NiH9bx1RHljqWdQMSWo2YAIhAIXQXizA0cSBhmjWBKM4ChIRHfdEo+tpjkNvqti4dOeN"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.30b1b258.0_1597090013390_0.015833992823586218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.1583e263.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-circular-progress":"0.19.0-canary.1583e263.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2k4pJgTHlwUIOXOczkPvp5uESUhXtCGGUoDh/2Nv4SXItAxjhLKVVz5DPCEsM2/pFDuZyr0dSIRSajOx9K77aA==","shasum":"a4ee030483ee3d86fed7ae68fbb7b4de3cef2902","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.1583e263.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVuCRA9TVsSAnZWagAAB/AP/R+tozaN1/1wdyWeENIX\nnLVJyVxME56oNYtLbYFavlvIUbEBe5h/iN0gWn7YVaByDdPVfLfPDqlV3eWA\nINGghv+OhKo2/35U9W+qfj5yNy6KVhSlU/+FykajVvzqfyEfxX28OMYceK/k\nvpPFlq26zrkj+WQleE9w41Y7Ksvfd+EnXpn+p+qiNjoRORQ6MavCr4Xu+nFQ\nprxl+9ySl/U5rGaQNSFGy797AVurkudpvNZf1XZiIWn2cYi6dEIC1hd1jHQv\n184Umyp8IXzyXockv1GPXpSha2nSIs0mBqkH+UX7jqwZY+2bNA/7/24WYxKK\nocNo2DhETxadsct28YkUl46F83ZtTBBkj4CHll1bz00VVF19IcEOoEd1v5Uf\nJxwzXv1OlCSJimElhpsSkYpRAXTIyu7vqk0tRV8qTbwo1zp4ifnXUjL7AOFC\nDoC+Bl4T/nBSCthR6gubLC7B+iFtp+D7HeKC7vnVClrqKkJjEZoOkJlJh0Vz\nKyn7HnNm9aJJ0tvlYsXxIFScsXEQ/AoclpK5AqoTu2Uve31ctN9xsumHDQ2H\n3tlB690qbnNl8HQCSJR/K7B00LeqppCRF5JMOi4GYMoFhUlH08FmYKNuVzX8\nW9js0rx3QSnjYNuV8NyeyHrk272kS8l8qKk1M7XX/bvZTMyLPcW9Vy15wbZ+\ncQJH\r\n=2blg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDghxxQ8fnMrMQ6pw6Xupwwrhg20EGFVBCcnR7CY/TCOQIgXVLz2gMzn/ib4/C1k0+uN0GgFjsgqe5SH0BAGZXFBXk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.1583e263.0_1597187438413_0.5686777129822833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.fefb1a93.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-circular-progress":"0.19.0-canary.fefb1a93.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KGht8/AgOw1kPIpagpSoW26mJTw6dSbonIVGGcIfJOr2Z+rtFf2RNmBWedNtJuHORP/sQQQxlwkhQxG7Z3dA7g==","shasum":"c01760c62e0e222595e564175827d9a94e54cc05","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.fefb1a93.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbgCRA9TVsSAnZWagAAaYAP/2IGo/weMwIoick0gRbB\n+fzEnr+R4NBOOTGiJp1Jhe46faxCQZcPgB9G31oJeI8LSFqh3/jHFuYYfSYX\n8yCK9EDyLC/9702reiQKmWrw9Gm0H3cFQIfFsKbWwLgpyvdqYTzsmDZDhRMB\noMVirDA9BofdDdHzNmeSGOD6ImBbdJDpiW7xf/2M80Vqc4AxIAwSszlVranq\n/f+hO4XeGVyuIGNYLFQjfpQY3yXqn6ixoZHGp7q1O8V16k3+nMOvaBsUXQbh\nKRQgwhYM70WnC155amd0UG5z4EStSTPiAgBzDRM15rMR2o56uP5P6nVTX6E0\nJ04IM3hp2wDr3+BF422fMPl2M19qdTqaBCAwtr1PdO4tznHsiLXLVIaXoJ/v\nmYBqCmVdSMFBm4lPmbG71ESvqEDT5IODubojd1xTtPMLizJPgOPT2OzF4Tac\neuzVDW5fYl3NCLRV0UbVOW30+5uZuDNZBlgLzSJCSFIp4Nn6HDUtJENjORBj\nvzaJiwWWvMWnEvXCOoasnASj6fx6xjToclPeAcX46vHrXNh35auhPOmlfq4E\nwwJl5dHziwpFRhyM22rF7lQqedMIGuVBQzGT66GGkBAURcwZ6rAfAXmoOXW6\nB7ZaGEIyNeFPoGjAoDILV4t3BUjcr1EIBqzvCdACjuUOZY9aOO5sxmDwAPV5\nvJk7\r\n=6FS2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCosHpCuO4iaPDFY74DFtYIk3CVapYxK8vucpIq/n86kgIhAOK06emeZmkLon51Eprx6i3kWS3mRuAUwNtE59QDTseN"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.fefb1a93.0_1597191904013_0.06623578433632749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-circular-progress":"0.19.0-canary.1ac5b9d4.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OCiaziT4udE/0FAgDoRw4WiIGVJ+G4PtxUW+g3SqTUCa9g1XzeA2+YKv9t64H9gliCYefEHB1q2TJfeICdBhwQ==","shasum":"4e834d11f3c67b985fb785c1aa75a8695ba80137","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSLCRA9TVsSAnZWagAA+pQQAIZJcyMUnzCelH3I4TDP\nxvoRlGQum2V8xBYW7ixh+0UzppaBF4wIqVVZGUdBrrUBDwklSlosWEGgpuXS\nynfloJn97ByWen3VYb+WSzl+o3907xKfWlN52tmPuomFs/Vz3u8iFeNH+Y7f\nf4wzxGAmMRVVFYgT26RxgPnYaDuajQRtG8eyxlElz9R0//uvADMTsswZEhj4\ntUpOXCyGJqQD5EjHhWbSDEynLuS0P7bF2/T1hxw5PTcVdl9taVo8GJDuN1zK\nDNEKvYgVe+MuC8TwokdRbRsnM7MWo8rLyKOaZhXgsQUrb82x5uDM3Pq11drs\nrbtEFwnkNkzxfR9AoVacjrTZeEWmhqwNnO5SZCLiddUY6xzU1cmv5PvxpucW\nhlxKhwfle5vYrOqKWFMqbSJwPVJmkJFJHVOgPHPNasGO6Bihl6KoH55HDBot\nWvJjFxLfef2eKqVcrcyMhX4pn4bhB1VpFd5m9zQvQxF5QjiX8HscQR/3ngbG\nD60nh8nsGIa7FLJhecZ/Qf6zewEdeKmflDbr6RRO4qHym0S/jf9yhxpKM7pU\nOnJ8uQmw3AcY3jAFfUL9nL4+f2hDicCnX+4bfCysUSuyGdursfuMJsjkflB5\nmV4VJgvyS18V6kAHHNRQOwl1Wp0jfCIF53rqJdpXSzFj5vogrJEl6czZVxhQ\nuL16\r\n=QVYA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxumvB73TS1wGLYIKx8P2zoxh127s816J9I9Lcdv4GyAiB8QLH6H4tcEq0NKpbcI9ZjsZ49rxFu+I6zSK+DcN/FsQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.1ac5b9d4.0_1597256843166_0.9972428806147144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.f17f5052.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-circular-progress":"0.19.0-canary.f17f5052.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DeybBWpES2S/mzDKYEGbp2f36yYhb96YqH+4uXaovWQx0W0C9Zoixa7yvNiTRChGCS5RY56SaUDq+6duCtmiLQ==","shasum":"7e99acb1a858331cdd5c7b7440fe26a65d4f19fb","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.f17f5052.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTzCRA9TVsSAnZWagAAHWsQAIvTpWJZEIfcV8R0dkeU\nQHproMED+gqGXog0xeV2dzRRI2LV8+wsKVVfo0KrlOkceB9zMqY5+YIj0xrI\n9ItZW+6EJDEHH8CJixFLIobsVtdRKSZU1n3W4ihpKPckoFIx6hll7VFz7CHg\nVJr6V0LfQzeRjAPV+sXo7vq7iWKP2QEhw6amaBQBe0qHxMB6LYhv5XOSk/3e\ntlalz3yUbH+rYeEEauOAijYrL1ovSdl71S5/Xge+KAMrO4qCPFD1n7bJqzr1\nbUltUWNrXDja+z4H2h+o385RHsYnmRg/GFMNuwnbIRLQ5POtnie/qgs5yow2\ncXvLHNm3GXMEBQfstg4PzguSicGvNzw+URM1whKAzWSHLTu7NVK4XUBDYUEo\nH5MSL67K0rtYkbMbGc11I2Ou0Q0FfxhD4cpeTQPZG0is7/tRJmsHubnlcv2s\nVl8bj315m3++W+a0GCzs2UGyALgW5WWS4rZCOt1QPcTmfeh6zKatrdr/b6hh\nj6vKMn1jmSxVhMG3O/wuyPtd+aQMz96X2Z3Ew5Ci9r1duxDlLaSvLoxVXzTe\nimBt0kM/z/Ah6CbhLdHEc5vatDhdiuP/4591l6mCRYVxqkZMvMKRitr0pjOX\nt/UjUd2KzPcAmfK3gaTuEwrouPzPFOvrqwILl4WTFoiETsBHcu65Ldd9OcwG\n/sTo\r\n=XaVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY0Im2KvHFCOkkK4e4iEby506v96KrDcjrkjf13yCyXQIgLzKwmxaGhWa9T9WmBYMcq50mSWhp9Qb6GiY+m2g052Y="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.f17f5052.0_1597338866576_0.8594528131624577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.80b5d20d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-circular-progress":"0.19.0-canary.80b5d20d.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wiikSuzERG6fw8qP0apIQN8ytiTZh5r3g0XaAY9lTTphwmJm0ocaC40npF7ZNpAuilVxaD0LR8Sd68cpY2tEHQ==","shasum":"fd9af36418fdba7ce67314320a643c587777f7f7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.80b5d20d.0.tgz","fileCount":19,"unpackedSize":49180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOrCRA9TVsSAnZWagAAEOsP/RcHERpuZjiU3ccXhoK3\nb4F/v23k5jQMvhPBELR5NBw7d1mzLI9+bEqN18bUWt2ttCyoLD9d3tC+xj8w\nKcXnEkntbGEsDUdiKDI8Z4pVpiNqoHXqZ5bJOixvi7andqUsIhs4w6xAoAjK\nrP1pm88gojM3Vn+VzTWwvtbMj9ewfUu+l3W0iWjjayWEUCW/9vKJNXZVTds4\nz+m4BXEl7JvDwLmMqYw2ihWgoCM+Z2l/HN1M05nosmk2sF7DJKsybs15I4oq\n19s2oMt+rgCukwMbfsGHufPr1a7tz4ZteQYVhWLWhW5Q4jY1Sgcm/h/RNNWR\njOWEZzre2ZdzBwuWifrPhJLndaWxnfbmvNe4qw1J+mLclyxc8AKql8BWMvQW\naN8sh8T6hYVVIUNALlRXXNx9ba5lQbFyfuNuPfX07bWSA1SeHh55ymZBMEl4\nqjdpVZ04Zgqu15ZzpsgkkvqHRxwGGXqj3V58zfcCnFmkdgwqW8r5wSktAxtQ\nkhOkt4DpBzMFvbB84f11pc5qHcAbE8W7+gwTweB4gaDxm4CfbhUuKKm2GYQC\nhckL2jsCkdhKJ9ecoFZYi/1na1789GrrZsUe5dWzv4EpCUnWT0dDxPamK3mm\ntrqLsbfMSf86Hw8EmeoNXtuOzFJBI0dkBqN6eurHoNSmeVMnStAE1ygEDhue\nmdxZ\r\n=v5Oq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCy7jskXCU5OVm0SxxZi9IRmM9dC2ZXPriUiDIVYHkPPQIhAO0/91UNTGua71E8zzzHpmPaLMfQ759GdMCOmMPe5Ukv"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.80b5d20d.0_1597342634916_0.29887447955135915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.758635ed.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-circular-progress":"0.19.0-canary.758635ed.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+7V0K7R85CoFG9c22ZoqfVYr8LGNN2dIC8TDHNw/74f0ai6xTaZqRz5Sk54L5MH37/2U10mdHxljl6SpvR1GDA==","shasum":"0c54fd16ed9d3df6133b0bc18a2176539f0d69db","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.758635ed.0.tgz","fileCount":19,"unpackedSize":49147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbuCRA9TVsSAnZWagAABi4P+wVWMjJMfU+3IWa0wbH3\nfV+w3mVoVTBbm9TX/+dGeMu3eBFkbk8yKjC3hRZ627nrvb1DvtqrOv62gB0j\nxCCFmdrKoQ4Rpuh8mcNPbyjvzFOcJcmyOdPYrmoRvACWkx91rfUAMtP+NPxf\nGuHnlyFiZ/Z+l2cj0O4HVA2jdqPqTU8JO0K4SvtbQRyHBaynudFYhJD2DSfg\nq8MMBQG6ANnRjYVKJ6nl33o7wVFWZwhls9irG/RkmxID/6m2PxJ/jxjXz0+/\nvZBcn56R/kDNrw80y4xnbH4HZaHgTfzKh59FyKPRiT+lOnptsvytvFYrH0eD\nXVoEVvZVuhwJkIhBn7l37FflN77CAN0B/P1kEWb5YPARxfQc15iX8BcebOlF\nf6Kc/4ZKFXmAy56nZAdTxOWXOC2gD5+t+ZkYrS7t24DZt/SsbcL/3+wxK69L\nTCFLWhBVh5RS7lAksnKsiIHBzrN+md1I74oIpLMtoB7inR4lsj3y9Jn5HGqW\n1VxKo0rdYH4PE5X33E2L1VtPcMdWuK7a0yV7nyu5+2E1FMd7fmNC66vKhNxM\n6zw33DLf7mIHRX8eDrLqN9+z4hY6uJ+qRrOIHigBx/R9sSXb5dv+PW3iFiiK\nm2KJ/LkWtNLjnNTRNhhJr6p1mZhftriQJVw5EwMklmuUJUu9V1cqhUIKj0r7\nKTND\r\n=tcKN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmU9dw93YZfWyjxTxiUtwJu24UAs9rv8PX92J5a1bqCQIhAMtQok34NK8F7f42Us+TTqb4H6RSAFdtLct2xp3Ly2EZ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.758635ed.0_1597425390191_0.3366488691504852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.18d6b808.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-circular-progress":"0.19.0-canary.18d6b808.0","@material/theme":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5oxhqCQ9EkSaHuVggieg8AP8IoCTkc078RraHvncWK/aBYtd72iVC14MFYgqDi9k/ALCVHR8+EHhjViZmTJV+w==","shasum":"b3fa446761e7e6bc229b3eb17ad33880413900c2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.18d6b808.0.tgz","fileCount":19,"unpackedSize":49147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlPCRA9TVsSAnZWagAAUKwP/03g7KGz5qBR1ceNbwm/\n7oOFy7wW3LLUWjzmkgoSJ2ERS80mJqrEGJ2fyqDTnu3BtlX2xfCq4nEOelPx\nJRBZdcVINLKi1dYT9NNy4/qHggpugrcf0w1sL54zcn88yxiUSQoC/h2TDNUI\neRK8g9uEL4LjZD1jiAGjNJRiEapbVcOhEQi0sxhtejBGoG9bJdWNAE8Q2lj4\nnUWFWns+9AsszrIN3PhZcDiMop2vesqiPiiwGwcLib+h6oIC0L7LuHD+UATm\niuRgiQHB6zXfDkHy0wha14Q2DDHmhclFNwld4k46V6mYLchJPE/LQwa//uf3\nokj4mmmXeWXQctgMKOh9WbpAseUr0hwpNKV+kMwks4+cHS4/8zGmLdHNpeJ9\nBcA8HLKRxpRxrmvNdbD/pPe2jWD+hun+NtOzzSlL0N2RakP1WxRhrHN0iU1S\ncAb+4cxaUkUWrBIoL+NzO1J61904IIYJFJ+nx8JW5pR9HuQS7ePBtxu/Co/F\nGAl1Gh1TC6ekHLmf4pzGyA+7J7Y01TYMNAX+99wgk2jX477NEfVyxZLBuA3w\nPANF8pS5CHjHPGQnNaekvdfwy2JNmSdYmooJTaEaU5FTj8wK0U6b48jExymH\nhkl5e4nYkJMG9dJMQImi6vTYzEwBG7EwBT6xP+7DYN2TRvXFo46FFxYWQM3b\n+GA3\r\n=BOOa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2IPxwmwUMLDJxnNqmorC/z+gDRCIqIqxWzNkFoN2IYAiA+6jVLInARLxtUXNoV8u9OnBUcML6Cdaj/CzoPzS3dtg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.18d6b808.0_1597446478628_0.05349041623637474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-circular-progress":"0.19.0-canary.5f8ffbd1.0","@material/theme":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ps3rS7wm/Dc4VyxHQu17yRk+A+8fiqYkMBhnabt7QvTR707pISQSK47qYGKgVBKrkVUtHt8fuR6rQmZ7iBEC1g==","shasum":"56ad8d5c42ac930e10afd9a08704c6c10e35278f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":19,"unpackedSize":49147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwF9CRA9TVsSAnZWagAAQnQP/AhE97Gh3qUDap5/gnK2\nwwF0LuPHiHq1wIUZfSJbzLECIIEd93lRGdie0fuiKzgOlbOyoNsTQ8OwDh4u\nvI+K0VHg5OfJrcFJdT2kn54qXQjM8gSByjMZdH6cwWIYsO8f/eQFkf1ha0pk\nI7+vzHMC2dDBTweOxtJifVfsHTeDou+jVztpzrwstF3mbjg7WydKjeGmKHfU\nUQyyh6THAdvKI9rUBuG0P5vtVqLqdg7ST96/jzo7BXYWbkhuTLGX6zKF6Q2P\nrkfFntYb93fQnJeKmXc8O8CNLOmPamma3D1nPCjjYddzE8X0E6kbSrI5Ndt8\nh68mopUgeQLa8y3MlKC9JREEvAMbRVshjX9g9Fsun4DEg6jb51niFHhleVnv\nwFzkAWIjIZdN/Did7UwiabqBfTia7b6FeAh8IKavDk9nt2brJyaW6GSDTTmm\n6SBC4n9HVZCYRgI3R+GdbNPJmswL3rPp/r3a5tDhoXcxgk6/tuYzKXNxyFI7\n4rgyIaUcgQjBIyli0uKwcO7MKi2x/yVhFuRdGOHIfKvvpUMS+XpVys5ks7Z0\nQl+98SfwioMkkxvD6kBwl4GVcBphmjDoy2MgUJmQq49gqsytjtMewtz+n40C\nMcUSKAlykDwxi3h6l+EP7LT4pMbk2xYbKj7u6RZjc5TWBSzZ8y0CrKh8kupe\ntTcs\r\n=NQop\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDABgecrrVuq4AIWXXXsJltFHMjKfisDDge6zYF3X9ovwIhAOZnNVvKxwIK+wNTLo0TUufzfimr0xNb9A5G2UVdrSN9"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.5f8ffbd1.0_1597702525073_0.8634331640120221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.8604d59e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-circular-progress":"0.19.0-canary.8604d59e.0","@material/theme":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-u9sGctx3ueLYvZp+eJbW9qeD6uudfh/bUwK6DYO6aMqX3Rkx1a/+jxeRSWCAcNRTizxnX+mjAWHb3Z8hsI6csw==","shasum":"a5b40ef922d2f06ee37653866affc5b5dd7d71af","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.8604d59e.0.tgz","fileCount":19,"unpackedSize":49135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyibCRA9TVsSAnZWagAAkDgQAI2sRp3xq+jqLEIGT1n5\nCQ9ZAzpNfGWONyOF6DT0rdzBm9WDhr+J8plLb+4Jw5B7hiy51GTpH/hM7QHu\nwog9q9tK1BDLLEiWzavhBmA4rbbmPf6v6eB/Qk3fZOFeDQt/Pw81SPEuclgP\nDip2kLu2uJNF3TcycuBUEYDxgb9kUij1dQuUwHGaKvS3cYx/wulQUd+FrkqO\ncZZCZ+xbQA/xUcE07/lfcmJe7PhVsQ/Sg3C+nYbunrDvRIYAvh9hzv3pvllx\nwjQ+hxzAOJtXyeWybomuiHd90iUGG4cV9BxseRPtXHjoZ2o8zm7dkknEyLCk\njLuB/ht0HbImzFgs/4pBWO/r3cJZrMBDqixc/Vg0ymHmTLtCDOKrXMF7Fek8\nHP7saKUC2VzTxuyzq1af7mxUb2cRtfSBayQfoJBZYcyxlLVhJZYnA48NvEPU\nlKCmeJO0mI2/IW8ByCiLV423bzHteEBaL60UM1B3GcZXxc8whFAP6vPrFHlh\njBwxmpbceC+eEyC9i2ltCUrLJAbNVbcTONQHiMIIShtZfjS/Vk0jKcUcElnC\nofu/mqsyORJY0j4LNMyxtbKynt5OkOTYXhedSaegTdvbNhnypKZRiROpJXke\nv5qzT7bvQVodZD6y7o5+B8cQWNfcM0TWweJL0xKygElQgp/U7NI9XedIY9bw\ntdYq\r\n=6bAx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYbtqIOr4kCHRKKlnNU6QWoB2mh8GXIcjjyB8/mFwywAIhAJsAd9VMeUnURmn7V6RZCW4vA0PKjpJpGaeFFzQlZRaj"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.8604d59e.0_1597712538918_0.48052941607949506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-circular-progress":"0.19.0-canary.1d7d5e34.0","@material/theme":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eA/Nq8hLa2uSLO6UX03+Ge7bqVlXYMhLMJrW0JSfDeG7guK87QEuPO2mS5TQBSdgX29qjxbmE4SJRwd2vyIENw==","shasum":"d3fb596d4881e7034e9e498c423263bf1be1780b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.1d7d5e34.0.tgz","fileCount":19,"unpackedSize":49132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyooCRA9TVsSAnZWagAAmasP/3kqv7UwwV7FTOLV62Sg\ngosW/kqOjRljg9TDcwHXu+mzB9CbwPnJspeNoiddGc0mzkhSGX0jHbZfse68\nuOpDChCEofPVubJS+WgdFuN1s9R8d/Uo/S9iIdveeYL3sV3/eFRShvBgDZ55\ntWEoNQZ+bXxBFtasaUn9ZUlPSVWanyIFLXas/6FRZMbZSjdHsSKjecAtFczk\nOxFJrdunLHa2pVN2sxOhPndsz+pa0q7I86keWTN5rBa0+Ikvsh8E3qU0WHJk\n4LcWBGAll8uSlIeiaWY6OjrlkQjZRafVwXXUEJAUC6fhP6wCW5qylTOQXFMT\n98mo3oVC8quUmq9ggCLXEFRKXc9yNuowO9yYhoQQ8ewhrfOfHYo4t8GgaEsl\nIl7k9ygjAUUCLt61TB224lBOfEY+tpdISvE5b+2qG9qdD/xcZSgQXxape6YT\nf18timSClfrRMYw2wK4XCQqWpmE7m+8lk8bLKd/D2hqoBRqEyXj5/YoaGnCs\nhniEGhlb5fXbo+0IMKST8NvjjqKiJswliXS7GAtpjvYcIyFHfFZBBsZ/U3I8\nCHlV7Xt/I9hugPLGwIjM7auZOwTBk2GvrwbXf2JFEpb1V4NORpKYAOvO6UAx\nTm4ug/h9jHrIjTOR5ampP34VEwQ321S7TgthC/HWrRoZ1jKCIhd9xyVAyHQr\nUhpj\r\n=UFJg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCScleQ0N5n8bF8uoJglGFX+lyngbq20JFOm6kq0vo1XgIgGSGbtfVrPXpCOnkz4eW9gt+vZU9gbBKsP5Q0h1KbPjw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.1d7d5e34.0_1597712936500_0.3135783865326027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9cc95c07.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-circular-progress":"0.19.0-canary.9cc95c07.0","@material/theme":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-89VaA0n2neWQmF66kuXZpgeN4VfMVmLqqb0wn6i4XRAt7WVGVf/Ueg4RO2UsiE6GItNNDBt/XyJVYbnYhaqr4A==","shasum":"6819a11ab1d29315a506c1d9de6018c2fd4f3503","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9cc95c07.0.tgz","fileCount":19,"unpackedSize":49132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyv3CRA9TVsSAnZWagAAIkkP/jhh7QUdzPni58ssPD2C\n059iUMZuV4gtwCcNfLb0QH8ayRxpDOMGgpkNHegbHzmbdk0xjfeM4Le92tXk\nT/+zM6EBHu2Wb4s+vNT9v0vItwpYX2IXPFti2j2DAa0P3chPDloNKpWtJBRy\nQBqmHyxZgqUwEFwa26HmDSQ576BshDQSXqmpqqn4pDejAgVY0Q6NVIoKSLvj\nl9U3agYBef/JxlnIFG+7pxv744d6QL0gPRkU+bTQdWGG6PJ89gQ/1IYZbI/f\nNj8KaG6RMqSkCcbJpnHSp6lmuwWyEOusGR6iLAYbb3zNI5fchEOsRFZFOhYt\nEnRPy5LnjU82HgaRLNdZMH98lni+vvXuT/vgIdMOaRcltZp82eWYb4EJ/G6Q\nagnTdzPzbZ2jQF0tyML0bM96XMkSsUN/vyX+UeXceD3LvjYpZEnKpVnYHRjn\niiwcRc5sBRUYGaYJ46iaJvGz36+7Er9qZY6HZLhnj0L1vBin486N2jYqaWmz\n13+gd2Ddy2c5T6Valb2RlKd3c6Dc293stg29Am2Qiuc5smjh+C3jXl8K3RD3\nDtnszMHCcJys64oNfurs0f7HFnZzWlN85Dlpa3lPlNlQRmDxLnrm241YkWdp\nqMu98ftYz/mvBxV+mQCnWeVl1Zqm3BaspdfURjtkfK7xgTttDaV3/QMiqI93\nCPgf\r\n=0GUT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChCXFQkGoNx3pPWZHtIJ/ZHHy7VrHVviRbl5KWz1CGvwIhANfegal/W6m8Ki255gxVyFRVegqGKHLtA8IdvGBhJeD9"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9cc95c07.0_1597713398729_0.3203220701567031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9f65ced3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-circular-progress":"0.19.0-canary.9f65ced3.0","@material/theme":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-khsfrhrWKEzKh8KP5ugpfxcLvToe1QBqOM5lG0lMiyH/tHW5UF/rkrZ7TBHGmHcCZKRxkpdjiot8+wwa3cvn7A==","shasum":"80beb17de2e6b003e9351822920064bd2e7cc5fc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9f65ced3.0.tgz","fileCount":19,"unpackedSize":49132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcCCRA9TVsSAnZWagAAJGMP/i48Q1lUN29Vm8ZZrH2L\nkoETZ6Sj0idb6oHG+CRnd0qvGfxByKSGLyI0jEXkDGvGjCCT7bPeTTRklM/Z\ngiowZJi9Pm0h0wEccCmvL2B+8FVX5jXQZFUpHUvH96EnVitRdz/ncZ9XMcOB\nxj49YVKveNo7iKkrpCWGIy1B/1iSrOGIPPgNl9Jkqsg4qVbBdej3WTwvhm7M\nsKhgvoBYWNCro/UtChX8lp9HdMa+sxG4S4YkFFu6xG9ZRwUPeMXuNjl8QcvC\nJIHntCsppVo0IrOwQHHgXJMa752hwIhDWoXftQHMViUle8h+KT+rc8MbfEWf\nYKIGrQAkogV0jNPWsY6I+7FkjI2MfGvy6UOBtrnd7pfGrfUTTYbjug7SS8LP\n6pWtH45c6UE+A9kRhFLgfqCWmkTflHkUDItc3B3t5si1xtPZ2R0rzLyEkVu+\n9lPPQhJV430MMeGNFQsilt3tL52QcR1hf9z+wklc/FjwoTO5da4j0icWgzmC\nvIIWHkqNB5eejTuFKMzj8QE8jNhBwv45TEJHPzApOZ+N+C3sGDKwBgSDCbod\nbhHNN+GuTeOaoiyTIq6cseMkezO9wMAi4zrZl9XuwGryRJTOvSOlQaNYg66a\ngwR/kGcDN9xWwz2oBl5mJPpdG3ZDXQur8Frr20nekQCa8qCfRu2edAVZ61IL\nFZb1\r\n=9lr1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK0KGwp7pN4SUXNFKnRjhn1tLXPNLTco7suno2EuQnnAIhAJtTEwfPRUxa/HfWnWSLEADt/kBnk5PI+f01sOkyJNMF"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9f65ced3.0_1597781762410_0.10377594120697764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.5962b365.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-circular-progress":"0.19.0-canary.5962b365.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9KkqmgPOgeBGnU2duet3mxrYVhrFYECaNsQsq/VYd02jGsC02DcW0BOWAmHB7AUERCPyi6w7o2wnKSmw0v8EzQ==","shasum":"d4d94f9e8dc5b88370add850019a1a3d31d6e3f6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.5962b365.0.tgz","fileCount":19,"unpackedSize":49132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYt6CRA9TVsSAnZWagAABw0QAJ19nRPQmn8jL/tiKSEY\n2sL2XvG9LLd5kbMhSaLM1XAEgq4IiOXqI15pZjWUsMtoWRJFqNr7j7TSx8QW\ncTkP4c6jWCnQ5Lso3t1UI09Q+W3gAuHR0akTm2R86MYMXKlN8JvjshPxrjyM\nQSetJI33MSIOebf7fWrOSoauGQ3+FSDOxwpVsuB7GBLoyX4GqT8tFo3C/xlP\ncuU/+OtX0v92jRGk+h4sF3qEwbhB56t1/OnegCQczyJKG43MBdZUfav18PfC\nLserlAVONonlYCWhVUra7rr3FD8TRuqG6FGzau8edLRK2M8/8jaRArVzzPDf\nKis2LWAEAkSyO9XcOncQMzXJts61TuS0p9fSAnLZ7p5/VIzGKhPmnaFqG5nv\nxyOucwDD5YYxXxL7lE8XCZEt/tqUHhlVWW6/uu4Aml6yp5yH5LCgR5Tcma89\nQezy035l8oBwi1UE1/j5vFMCCKoQLnOvISFPtchTqV9WlQshb2F/aOl59S2Y\njeTC5aKyclRL2xq7oTo0suzEbkAWbsCw8YzGFaDu6CAEB9QWJoKTirrrlLM4\nS5BfQCBp1nsdUqXUM2DsiDcz4pjRLwLkQsjsZexwo4KpTHcrSkvKsI4d4GId\nIvkVn5A0NfJZJ6vS5dwHJIQtAAr8quY7kWX6ZTXLPW/E1/EdAJgr33UV1mDU\nbK1d\r\n=5qho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAOV+Qa0vopkMtPET9n7SKgmyxtJgMInflPC8QMsOhhgIgRF7fi2sdBHFGhiYG6vsjkH5TZF59kvolY+Hnh0GOJkQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.5962b365.0_1597868922225_0.590847400348899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9c9ec756.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-circular-progress":"0.19.0-canary.9c9ec756.0","@material/theme":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lVZpqNT1MKSYvP01JCUchfZay4XPa9OaNhqIECkIwdSNmsyFAw2/7YPzdm/BrncicSBMdhQN6lQcuOHICBwHHQ==","shasum":"06fca8145343ab9a29fb7abd4beb0ba81fe4077c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9c9ec756.0.tgz","fileCount":19,"unpackedSize":49132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsc1CRA9TVsSAnZWagAAxW8P/2tqMhf8eHIPGHf8ny2L\nnTYLRJ+4LU6VhHmaezOTg/JjT6pxAA+Z76tDL4a+AmsJ+Fr25EMsLES6Bet9\n3M3wHCdMKXmPriNQQDA6o4Di0Ddw5umgrhb36cb4z4McFmp4gOMaSbC7QY31\n8OT7n/7CAHB5r5n7ndzZ4pwBNBvNKwP2ZoU2OuqK28NkrGsLcilvLbJ0I91/\n8JZV4mLYiODLOu8Yo59QpMqcTm/5kk8YqTB8U1hSOlgvWb0q4ThYje/c7Pts\n+rvy0NOGjF3mjnCl8meoISzbqgxkrnCoO2gn8/msnpErDhZj0IG/k2qY2srB\nzmtXq4lp/Iw50liczr9hWHeL9zP8TcyOilLhlzxd9EAk4Azxa1t66p1Vj8aZ\nvTxynOuLbPxr6er1FK0MDxnP0ddRfQz/vHvU7wueyRLaS/52duomQcWVMxhL\nOBknTHksH5z4rVzBUgpXiyF/SHXClRxL+L4UvPZpMD4IoQDt79zFkd9p7BRO\nlBgZg5BUL52/ER/yhmnyPUUTAeKvy33w+fo8QFvpn9hOKQllkSre442cRHA+\nme3pvljGZyHx3MsSl2pWlMrKHrFC7l2qV12EIgDV+REjXDGVdvb/oxAyXysz\n8F3dyq0dvTqWBAKstoSO8iFTtwuLr/drWcx7PqIgoCE1S3NaQRvdwDZ7Aw51\nOV/0\r\n=tRSb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVgXO/CRGCSECzSaCqHvJz9/pPauEfKBRvQNbPJbs+BAiAD5Tvrnm95FWo474jnbzzNghKeS0ilZflskmpv3abknQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9c9ec756.0_1597949748567_0.07106564264096371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-circular-progress":"0.19.0-canary.fa0ad66a.0","@material/theme":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iwH0OeqPDZTbBvofVcm0viT1GCHwhI92Cgw+z8miqDvurT8YOftea/SeIIJfPIugw7OLxqZXaEbGcirAe4fLew==","shasum":"09ca4daf27d3d321f462ac76e9f525d7b0cb4431","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.fa0ad66a.0.tgz","fileCount":19,"unpackedSize":49186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5wCRA9TVsSAnZWagAA72EP/0mQHf1sKQssn4BjjOXa\njSe92mUtI/N2R5N6D5VSuNI4A51ytV9WOruwVnt/O6mc8CNQljFgzhORFkcf\nFlWpwE5oZqHq/54HvDKzR6Z7DU3KHTOIcCNGvj18k5f5NH8rivBO+ZguV45j\nWafY9OJNmFOtyuEfwBTZzMt2npAPn4T2gwddmxJN/0u0f7q5FDan50mLB4/6\ndv/mRHw3EuI+Wl/BQ3RK6v4pw8RvcdsRl3pODZVhEAoLdD5r2wp/Epr3F+oU\nk7kKMgp0ZbIqAdxuPLFtfjfFLWKS/P4Bh9/Kdnd0SNJ7i51Q8nywV99rIYPE\ngfmDX6f8D5ziaESSb1nqzEHzVAyzfnCdxK6+24SF7A9i16DtYfE8hjj7c2dE\nNO/1UJysXMt9e7Kc0Wo8/mv1NyVHN0yd0M1cx/Ax4NDvJTYJmVStbOY604Gu\n0UuZ81FMc1dsxTtYimWk2/cIXXwGMeu7BO9kDEfbaPpsbmY8KYwQVKEJvmMk\nTu/f5UlpFNNSakpyXr7PBAGBPVUnB/IbU6q4D8r05aldSbj1FVS4urnW/J67\nDXJ4oPx2bQDMAUDJEL7ilNmXRDRbY9x+Vsxpn/uIHUcXu3J7Qk8x+3jDaUzE\nElBbB7OXAuL1vW+7E6UVk7LIVh9bzGpCETYdFzf6GdN9/WjUqLF7N7h40da/\nwknT\r\n=wycp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqOyFyfXajwiRn45A2u2UtDwAfZe1EZf9w8mLau7Rh8AiBPZqbQ2lkP++ZontTGL8J+mwHxjvGszhT/7lgEFYHzJQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.fa0ad66a.0_1597955695929_0.705932516363158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-circular-progress":"0.19.0-canary.06ecdd6b.0","@material/theme":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l8L/HW1He5KBCQrYbyX4NwsJDc+ZYDZgz7YezFNFvG09rUfp/BUonIJ1Z8dtmq38oUCY3+mnXTKTD5AXREN21w==","shasum":"c9bb08b1c6d1724cadc51ebee66091c0412ba599","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.06ecdd6b.0.tgz","fileCount":19,"unpackedSize":49186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxDCRA9TVsSAnZWagAAvHcP/3FkO3xvRs4sQPEhdXOs\nTiws9oIb/9fdT4NJwU1Ex+IYFO8jwB5ahK2ecTr0TeQ9XiO8RZeqbXxTlWkO\neRkdPlSWXP0IWdSkTYAc1U+7C1n1CIrjiKPGb+zs4xf0UU7Tjh196oYCHTt9\nknbCpG8yx67TA4A3XlHXn/OssXiDoHrpn076nhWGzcTQbiLsioVIDUFEKXDz\nodMIbsgLdiZ7yNizcPFcDhXkMvUYYRYt2A8o8b2zTQj7FA4eD2GaDGyxb+Yg\niqzJ7HCacSzWn8arUNx1L5vD0qriI/1HT4/Hq18rHVJ9sc4byjTQJ9LQmv6z\neENi9JQZrIui7KtGZw7+Tn7ymNTboQzCNohhxNxH042I8XA1B21uU+kWkOPL\nyHEgmNV3ndhcPrqKnGQas/krTmSAKEVfbC7v+Zursb7/vbdyu/aIZq1DeT59\nVjg7CqgVZJQ5StTmVn8Ny93FRimTFhTRdIgznpOOf2+p16ShMjnbBPqqy/Ga\ndK/LThXUGBHBvTjLACHpgDRM2e1i3W4J5Gt8G8UFgn5KXV5BYzrf9K4VkQo/\nCOpiqeTS+qC66Vautch12NM4OSQVwyQzFqZDgMwNB36m87BnqlmEbeqge266\nhBEKBZrBlXY/N1lvyLw2Ih/RVHzm5l3Fci3cUnZU1BNkjnD9VR76y6x6eIN2\n1Mpb\r\n=uEXV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBN6t+4kkGzryzwUk925NX6JbIDHbKMpJnpAzjGSykBtAiEAlFOqWWpG9+qZ/F87NrfmcOgs5A62NoyVS9zbYYWjq4Y="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.06ecdd6b.0_1597959235010_0.041250816274796875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.2bca2318.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-circular-progress":"0.19.0-canary.2bca2318.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AuWlB18L/QYpPaaw5oVg4jgxOf6wWtIBgov8n+BjzbO/A+04U5rDRG2Do7JYiYhVXevZWtlevggUvFDNtO9r/g==","shasum":"edee6bf5ab54c4010042e8071733aaa6d2b2395f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.2bca2318.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnWCRA9TVsSAnZWagAAMBEP/AxJQlaVOEJRX/PCjwko\noj/DCOHHUCmyFDSlHxOPv2U9Mp9Pq2vtk1Pt7WZoq9nBtUPvAyRFBXaj6q0h\n/Els1U7sIDsDgICbUEw2VLqemAMrnEmTnFLYDCIgLlPO9nWeASfodk1n6jUX\noRU0yZL6JXAyBRVdVe/P9D591mt1VsH//R7UtyhrEgNTcaNYZLPBvCGtKHmQ\nwtirJ1CFplArarP7RMjOb9wENOZnGVxqjWPulgCaTPelAdG6Ey7rfxEeSKg1\nFTIEOlg7iVelEUEhqYbKiUa2a3qGZDhJ2h/FdF2f7MGZwhLSAMFtsRqro7Iw\nMQQ+JhCRTUU/tBarbOJ5UTuz3oS2bdXE6srQaVCiXq5zrRN5Tua1BWyHHAF+\nSRHYH52h9PfGBfDfJhWmvJXzocpZo5AuWQTvoA/5nOCDUaEGcSphoOFBkcC3\njJR6Wd0vRWDVeBcnLD5BXUIh1KMRue/gk3MgupKyQs3Rxo/DmqcVJUfEYlBO\nOl/kU+SNzip1ngZXS8dgw30smcfgpiKwX7kQ8Aw4kSmZO0SXyDWBEdn5m24f\n9cU4DWlOx06dEq8lf8AqM7/+TgG/h/aCE3K4sapMQ1fafP+rNwcrqwYIOjmS\ndzhGrNF4J8JeuGIGlVWIcQ8hIc7PxyxrlUEhKP3ki3CpVBGtqc2YJkt38SPW\nS82B\r\n=g+iP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3Ox3cuyQYeCv/9MJpEPec5BUoCTq8Sv6yU7GQSI8iSwIhAKvLt/elT+q2hB82k6dSHJQ8L/89rzzy+QfvpBxSdI/3"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.2bca2318.0_1598032341991_0.435509758300211"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.6aa47265.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-circular-progress":"0.19.0-canary.6aa47265.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FYhfijUtUw4c9jAHKNEwZ9R2WHL/pymGhr6DHwft6+7hkDUpr8qL4m8VpKztcYAlJKQ2JvIIngfUkj5KfXe3QA==","shasum":"2ecbe5786f2f3e94b531d7cded4e2d9d8ee73de3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.6aa47265.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9fCRA9TVsSAnZWagAAhz4P/3Gu0iUWItXVhc364jPT\nutlVeeBtZqCnX1CyeRc6qgGK1JhIgx2UW0/yLtZxGUPFJwFQr7vi2+VGMVnV\nhecMzxKdfkgzwwgo01R997Hx38gd1ET47WAbtmk+H9dVawaqekugJKt2p52R\nfW5QvO9fAR5lcMY+Vj3YvtlZLMd8Ol/MezVBOlRwN9hPS16wxbMV5dajJmKc\nqZgOGKSGb2w7XN7YxmiwKis4Ts21EsGlhPe/NuXmgCCO5y6aIQJzxvP5RkQa\newT+uaT+Kkf8mubQkpm2HwT5KOtaR4pq4yE3dNN8jxFfxprJ7PD5IIhE/lPV\nDrjPzodTTD3cI4zOdBqp52Xq/m2b3CYSqYTUxSEcnIivXp9AiFJapqw60alb\njlV3vwVzA7UN2f9FF8kQx/rRhbB7A4fvOuTLZXTEfksy3Jf3w3C482hpeZbU\nOPBy7XRkq+vPGtEjqfSsv9eqJ7VF6I/So1y2v3lG7p/DQCimqYVnwWGF8Y8g\nfjm28bmFcIV39Z/tYHtgLtRce0PQfaDmtCiGAP0axS29SmHMh5iZyVbZCcrD\nOfgbzl5yfvjL8k39v6V/a/EGLgpajTTiA0Cd4dJTXee0f7GA7zsBvXh+9O21\nmwgkB9HeZWbIZQML4Um/1lpTirVHWUlIHEioDVmMxAnHsXMwV5geAtNzT3EA\nTSOT\r\n=wI6A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAavcYAfFPl8yI7YmWFuz9r8wwtaEAj6+SRaM2T+q/++AiEA1Td1Q1abeVTysXS2PegSM5MFgeBDsz7Uo1aek1u9Tq4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.6aa47265.0_1598033759094_0.9326464315849601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.e7202a07.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-circular-progress":"0.19.0-canary.e7202a07.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hcza7uZwXw5r7oyXKwwtgv525R8g/36WnpFOqoEZvpV31w3Bxy2iFbN7UylOmVwFygm2bPGzgSKGLL/vqpxbcg==","shasum":"2ce12d1d2039db4e086effcdd3193ffef6b3dc94","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.e7202a07.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8wCRA9TVsSAnZWagAA2LcP/08Vxv668Rp+9Ujr/Syx\n1tZwuYL26Ovet3Y9f0hsdP6hYwk6kvE2BCDhZxUNAghsuf334OKhzY/CJKLM\nLblTJZZB/ePy+nDJN/c5ITD3QBZ7A4+SuSRWFobPeshVAN/jHAv5Zs7CHq1y\nyZ9ei37XDCb1VLwtrtLWLqQu17KC/pGfB2gljLTzz0fuJTxQpN+74Gv/R5rp\nN8YF0ILahjowsa/tnmcsnvOytuWTWxVKL1lYSnZiJHfvX940bspEnyko0WHY\nGfOLkj3+QbnpTeyBAwjLbNk8GwY6YEXusaK7FqDoK5Dr2nI9uccnYQ7n17Kc\n+iUgBHaQOVbYpTxFxmrCw0nAMLSpcLVnEai1+9JT5qSZKSmH51i+ELjt75p2\nI2OQ4RRSf93PXQhpeHyaoi2TmiOnHNUyvVrivYf6YumNR4UnrQ7vHHd+8Yed\nSsjnaAGczQXOnJbV5CE31Z5f8EbdM0K9CiEs4bXlzLhccxWqTPdtUshwhiI4\n7SbFfmTjd2IobgTc4iFZgxqJqMUMu+vYu+usWWx+JNIjm0iXSE1fDZ6PjBV/\nkQLpt5S4t4tGNuQekiN71aCQcH/On+Gx1FM0q2aLxNpWLXV0cDh342nqr2Ez\n5fqI11FXo+w9dvzQKZIIomcVTJTys1ezr9wvquNMo6yuPlmIQT/LaDoGxicv\n5F65\r\n=kyiD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRFX4E03yZF+kWHGoyVFipqhHD6U/kVSkD+7lHgGGx9gIgIzgpRscY8UpBEAlvuShF45NWV69vZZU7Itp8ljzB6wk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.e7202a07.0_1598037808044_0.80770986060458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.f208201e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-circular-progress":"0.19.0-canary.f208201e.0","@material/theme":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jqaVvU2ty8b582/W/uuPVyP0U/8tKSBfkI+Rq3vhGA2O5f8gCdVnlWgMkLuuPicV2cS8wB4lP8vMZHnnbaU12w==","shasum":"c2477fa8369ee2e1cf772a9104d1ed1bb1fdc8c9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.f208201e.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7sCRA9TVsSAnZWagAAkVcP+wTMNKu2Ql9/usv0v+7n\n/nb4qrSAZjFGhBQoEdTPvpdtUXzUB/Shi8kLsf879/uT5+JjXPijBBORA3KG\nVfKuMZX6hTVM5iZFfjX5+l5h4NSkYi5O5a2VkMUABOSTTlpAhJgUc6Lyc4Z2\nj5TrPA/bgQpcp9PxvVWCncCPGjvvosa0Q8JbxNmvt+ex0IRXJDwmsJ+FwpnV\nacX2hfzeLdlGpj+dNuDIa1ldEG6T/+bpcpJ3PG2Jp4aireyqPaVuWgJf6amR\nyUaj97aGZPq9PSTlmyfrtPOkELnkjxfIasPHz3UF3Mt+kpOB2rC5QFTqkEd6\nH9MvqFAodLJMAME3UeX28x5AMAvMdHm0azpnl9UwCY2T6Lf/vB+7BLGaa25H\nV31AMaGQcTBaBnCiKQoIgnmflExO8VsfjC3JMlEaOwWCj52J/X2AYelYOm2a\nWU09BEMfAr9oZCazWYLQxAbDNS7KzcAVO3Yhlk9Es0IUd2CYm8flOvtDewGr\n38ZzN1L+oSumtX5EhJddBP0xQmMQBmQV7rX6ituIgqoKz0DpXQnKfJGeTVOy\niQfi4a0DP3tJtdsoKqxEGUPi34NGzBUnHBOMg44EuM7DcqbfwDpbXcfccgLM\nb4t5YEGD9D/X1lhBfl5Qrj13awm/8v1X1N8Z+umEdTi0bxpmQxTRCxfzfDER\n2vO/\r\n=MHLN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4bjDejx9c0fIg5WmV76P/rk6RCyNzr+eik5GQo+xfqwIhAKGXrtk76nrNrg6ev+o7lFsJCjugL6H5AtrYBdLMUn6l"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.f208201e.0_1598295787973_0.9933334733818924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.14a172db.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-circular-progress":"0.19.0-canary.14a172db.0","@material/theme":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7Driy9dgUAiBnLoL0k6Lhf9kEwpSFY9rdytxJygE9cWF+/H6EiCY0dfu6tnHuoWfhCtlnWeM21Sj5v6q3M6sVg==","shasum":"247a110a13e01e4c49dfb92b7e9253377f37a51a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.14a172db.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrfCRA9TVsSAnZWagAAVNsQAKOjBYUZEvOErZ/fvvN7\nakO0qCEomXe3/i0EKO7IOyqO/K8xoYXfeAy2nmqnPReiu2fgU3xgUlPfp+rF\nul7jQM5UKlkqogTZGSx+FL6ONFwWePLP5sZA33llSbtT0yMYHjBIUhYfWiB8\nLBc1reCo3B8A+w+q3IVzEDjgyaKaQJVADxbiikQ844w866jN17tVsXx/GQuo\nW6ziOk4gSeO9BypdeHzWsJhHIOFRXEM31rADnuIcZrmuYR5meAI57itqE642\nnurDMSCRuJG+mWd2Hn4XTfyLgRLvUL9KmoojSMSxbEWjuBLlhcmwlUHQIYD3\nVLAomYWClnceeUHQcEwdEQEnzAI6Q6OBUpkOm6qcSE8Ewc3jJ6haTcyH1luF\n5D8AgSpZLmgCcKZlRYfOnEDOZjD7TRy0b4s814yhy+uMAhoKcHDSePlTOdN7\n1MbvsQuYZ0/Eu+LUJ8LH1+idSnm6wmBBc5eIi3ROqldUNAc5hXulTw8FuFmO\nfmvLNxYx85+33RXef5QYVlxpcltgP0ALFoulGwcM3HdfcNGIQYP/Vc4XqxkN\nrPwhdCYfMaWbXlIRqpp4vWQfo+KDFIsNlzPG1kpo+KYvm+CEr8Ko3dBUVVPQ\nw93uHbdIaw+P+rPkosiCwbMbOfROS9/HWqXN1eb4UsnSol7N9WcFYhm+6+F6\n9Jpn\r\n=kwxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDozJ8NXsxPKxwSPIzUpRP9bNaf5dW6HA8qlbDhc9c0AiAKAzwti4V/OKJRpiKz3L0kmyz2+9UkMAI93W/O2saqAQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.14a172db.0_1598384863403_0.9812233763154359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.e6c1038d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-circular-progress":"0.19.0-canary.e6c1038d.0","@material/theme":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+EGVHNSeSczypb2PcexmjflZO4WwIWL7OTIg+i8Fp4QLsdoPVD/VxecNGkPIvDccN+QfM0eGFcQfHk2G7sIQxg==","shasum":"761e7fd6905343a71c2b882878eb3f82c1f45bdf","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.e6c1038d.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtcCRA9TVsSAnZWagAAThwP/2qGwpNhlxkZZpAE5MeV\nrpTLCoX88hd31PKtWhhqGnkBPbTo5mlEtuSfDOv77aSxjdp0YREL6XlppSrG\n6VOsD4a5/Jho9y9+W0bWH48cn2whspsGptIJ1MUzjn1SI0ybYmnI0ty6/KEr\nHH89uyM6WsEI22Q6U9s1ZZ81XHTmdOWrWMTfnOLU2n5fu9U9vTbmMxocCADO\nRqS2SKiDznRE6mbQ89aG067DinP/dMDbavxAOVBeYUBKBkBdCbxdExLawMvA\nmnAhdy9Zwl3S4iKICpxZVP5aiULb/auvvZIl0W8vtKLJlkLqunpHTiIWbcr2\nm60q+9iRanOnXe47Ifh2widW60X4ZbERvuoATD9//Egnx9t7va7zcGRuzjad\ny5m11nGWJq9z6MQROpLMPp4U7vTW/NR1E/avNW6UiSP1Dhcq4xQQsfQ3Xxlw\nCJ8N2IVWZ7OL3LhUSU0Tf+o/sS1YN4n3z/+JZgx7ck65MdmEACzWFXhCS3UG\nbdLdllKvGeoWXME5BV27tedUMWOGIaNq6lFrBQ3B/TaRJ7cFYxaoxrTTbe3x\nfWq0Hn5VaJMIR92Mrxz24Z3tSr5JDsVhM3hqIxF/Q43KVvaLykGt3MuJLiI8\neajd6fbmaAS2ddLknCn71rIQYTOpjxnVWKs1+mVFH+OZK7k1VmhM+GGeiXhk\nbvN0\r\n=Mm0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2xshvOZKdPVpUN2h1JThnK1LnqcjQq31flUD7Ty4lZwIhAKAD6NBUyebSvjq2X69IFZIovIzpDQ9oT9ToRwxr7kAo"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.e6c1038d.0_1598557020527_0.5992723299478848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.34012082.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-circular-progress":"0.19.0-canary.34012082.0","@material/theme":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fSPYibnYqB5mlQhk/Arhd9OdvF1IcntPYmOYU6FvQKB3k7W2jrofTB8PhtT5VutsRAimztlILIfr9hfAQrfh2w==","shasum":"7a0472f264cb349638ecbd7ba12b37be7f23b191","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.34012082.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4BCRA9TVsSAnZWagAAEncQAJnxqdyrZN8ltwS5HFMy\nFSGb+vk1vwe0u4D1RcU36YuHw38TsINweuy++BMuly2FqPWOjvhyhI7XeBtF\nb31nPqJcb+Pf2tbqAoHZWRfTfEavavpqk7TYpXR73QiqhJmDslgYLP1xjV3t\niJWlBrKerZ7Z40oqjbJJO+PKPEPL/AjAICkiUvDkstxlfBVpbaMMCKtKveY/\noIJFFJ42fANPW4nWwSHd0guRUQ9rz7QZfy2NLTJmfmVpAuPyKn+6zF8T4k8Y\nK6ICPgV7rxmCy5bTrqjemr8ompCCifdq1/u+fhkxdm2RpmNraGJ9d/8L9Bxn\nC94tPtwMIRHcXNEvJKJ8ogzcZl4eFISxTU1olX5N/JvnwkQvmwfGxTMbutH8\nZAk0CQgEuJTmA1QXfnxj5JQLUOHEMWRih0GOcrubUdIgCOQJ6gAUW9snkaQe\nBzpnjPhk2PotwrYrd2jdFuMG1LRynA1z8s2Vzc/Ew9UwXZ4mrADX9R8GJt6P\nc0eNiVegLwy3/FHZpR1yJcZPZXW9OBmjhTL01f4UX4StCKhmbOHVpQ8iJ9Hp\nY9scU1RTJVXgvXXUa9X1KrHZmUMaeIbNuGzbMIrGb47yk3CRMmFEL2VOdRrq\ntdM01j85+9F2g5Mz0GDYSfZ111eUZSxZdoKGtvVP4k11c5DDLeODx5uSM+Ca\nKWUp\r\n=rLZ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhM7n0uWq1QGTyX3fNvkg4APUbuoUPBYGIPBaYQ/PjoAiEAu1nprplFEdVsz9/9NSMgpPESIeRoNFvi4yXjW+CN4WE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.34012082.0_1598557697441_0.1427178074518296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.c073f7b8.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-circular-progress":"0.19.0-canary.c073f7b8.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7OcLaftPSHcRiPsWnKUo0caysTW1bDBbs9OfKYafbAyIm/uvvqRL9HTwtuIxqCWc9hfx35Zxh9uLKf23pc1Paw==","shasum":"573fc8d3581f83b1517f4ec8636e2cfcb6068ebf","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.c073f7b8.0.tgz","fileCount":19,"unpackedSize":49369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrpCRA9TVsSAnZWagAAzjEP/3GEDEwuXNDXeRSjSUOk\n0f0ah5MJkRoGCl9jErukYUT5TfnEMWLA6EN5MBqeHsGoxJA1A3vnPGjpSZAI\nJWawKiMoB3+nKJavHA8T0gqtVC70+llt/NvQ806BJmUwYrhXcy7RbaTuPjab\nb07DYlG4RfTP0WzLd/PKx7pzp1vxqqWyYQHMIOzmZiTLhSbqdwSaJ8NUsCyp\n6+As6hwOraKMGd/mUeYJzqNSRpcow34Oa1688JpqcgxWdpgboVJG12VC+bxn\nageZEavSYEoAaFYdKtHADye8mEOVz6pcy/ionkBg/PYkTxMD501UymgVtaJZ\n/DIMfJiwhdceIINGhKVad+ehS5KXO86JGOnP7yh+UkSMXwwhSUbB/L+wTw11\nZC/JpfG4/vcCov4VH6svgTcEcD2a/PoVl02KIv+uk5cL0jSVH0Cqp0tUxbBj\nbUrgS+OamNGB1UERNfe/F6DZ+UPoorssuDRJhN5rk7cUdeP9sgUlElrUvPui\nfpxicph/T1OpJcN4okgrdTdaVubEDN7QfFXibUe0ntZw2dhyZsCGsl+qEa33\nz8RgoAJuiRHJrj+avjg5pkS7SyhqDlETkg+ZcsptG0f8kFTYQ2a74DJl9ydB\nTnFgjvKUCr4xPJd4XoBThj/f0OPtGUSVrYFSuJvHywXWY7bJKYVwf+R68wGC\njYfl\r\n=CaAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUzGlfEzmO468ZfQN8IejZTeJv7R6HQFBS8xhqsdzHuAiBFhWHDayJolKZtfgBziuhDVJy9VAhSKr5haq/OBBs0Qg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.c073f7b8.0_1598634728788_0.00629241173937789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-circular-progress":"0.19.0-canary.b7ae68ff.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lRcRcSv6C/VeRzyc/x7xee7eb4UdcdicQDjU3XzdqHQg6kYup+ZD0rWjJt0CLCPlxUB4uNa76cY0Num3eCJK/g==","shasum":"0277ca88dcce02fbbfecf0b4d94916971b978821","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.b7ae68ff.0.tgz","fileCount":16,"unpackedSize":40751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7mCRA9TVsSAnZWagAA2FoQAKT7eg7BHZhCXHcq9hfZ\nJGvB4w4pmO7mstkK8UrXF7PWkh7hY4mnaa5T+tj66udw2jZvGb1vqISjxI5R\nHfx4Z037/f/fwyvOoYysv60TLG70lg3fipU+Fqlcku3QqTXOuc+8m1gmtpdx\nYzwvTn/R0RijTYzDyvGdGLd6fhsEsnszdLkOIZNrGL0PLenHKJ1AXuiuxV8Q\nrrDiSJSnwteupbBcJR4dc/YOAjce3iE/izZG8O7xPZvIHW9ZYwMr0AjlSPAu\nogdiLiWFgNE9eyoDy4oKWCuCdM++o02nm5BZ8B2sq+olXsOCCBVMl7VJbZLR\n2dh915aXaORrTGXo4GmDC5IYX24G7Uhmgb9956MzVnsFsKwH+53k52xKjLJ9\nYpV4gPfvOA2AToMClncslr4W9e8nCByVI7H5AxeNQxeaatdlxHo9tQ7UGS61\nOwoc23NEtc1gpeB+i0bJcOdQBDzY6bwB/fr1srg183VXfcAW/bEJq3XU+gBB\n5b1EqFNBu/csLxIUA662/xyT8ceqY2xUMDjuYgrsG89HOVSnh1n9+rggk4vK\nd8Y9j3x/zhjVVFkPcNKByJhWff7OpOBxKfk0wTV44F3KNe/PAcTSvJYqBtTn\nxjqLGU9OfyuH0g2/AEqSq5yGO+WoB5Q7YhUVaqHOwZFD++UblO1RJrOflelO\nQh7X\r\n=LQq6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfr9N63byjbaBLx4CPoe30f+donZsvEPKEH1QaPfy+twIgegqtpVdnsN+doxv4A40zgO+1NBeBnZ83YuyAmow6vtg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.b7ae68ff.0_1598664421932_0.33864789552491215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.697e3879.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-circular-progress":"0.19.0-canary.697e3879.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GvUEVQaxV7K2C0BB7MPCQA88jNZqXwcA6lnn3e1f2u2Fvdta8pyP80WfXJB29Yh0QpSXFJlC2DubrKtLhhyzcg==","shasum":"be58ab0b8a6288b1b7a22bff664ada51bea0f790","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.697e3879.0.tgz","fileCount":16,"unpackedSize":40751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuORCRA9TVsSAnZWagAAoXwQAJKfPv5Gu7sKv18WXgfY\njemkmtynkKEeBtGHDJUxpFmGX6eUTYTQ79ZUC27lNK7Y6jfPNI795kHowhqR\nnIn1Pxs48torTjNdLzEG+2B6CkFCHbyEhBKZNc0gC+MxIZZ3nCc3nQsjmaY2\nTfyGfUjXTp5QWCCHCbVIJvttFahlcgdKXcV7LD2dUwD4GzDyS6sUlAITvPyQ\nBQA+74wpREM692VhP/Fo7gJcRRx8IY95YpF0lgtW/S3hXm4zNjv0ez90z+27\nYc14gfvJpPHNIn2qMbq7VNJieJ196h3DrdySVYlah1gtP6BK7+CjFB/udb03\n/xmHAYZeoADSbrf9kffyYVymUnOzBYWEfWdM1ueCkpVON5K+pRfFZu/p2zmG\nPLGFAFBT6J3iNTVdzV92hJe2rTVRTqYcX8rz1Ju3Rngs6auOBqMA+BqGk11O\nRnzQt3wMEIzUN6ZNR8DlaUELDdo8UDzDuDGt9yWY5XNXt7IqTeNbXKpsoIsl\nMw0+s4k4TCdeDHlSV4kmW3jQZrXh3VpYoFCPBd9cTPiGP4bsR1KrJSMu36C+\nnNCzaAgJ2z+ILJPzCumo8YbozWXFNVXyJUDOYmLcx7BUVNn3vl6bKWg6MW2b\niDPJmYH/BbsMAWlNq5bpbG3GdY0JRGh/9Ie+y0yLzbO5Rgjz9nPgm6mtgznX\nj2rw\r\n=KJX+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSFn1xagLRsGL3XwS3Io/0u88y4m7KHRoSZk0QWhxN6AIgeXI9jY6uMjSIPbU7ZFvjrphC0PRhvDKEaMjZgcwkztE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.697e3879.0_1599005585572_0.6417637754850742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.eafb7991.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-circular-progress":"0.19.0-canary.eafb7991.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/circular-progress-four-color/images/color_6200ee.png) `#6200EE` | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yxupdTCR+QEH2SmddURz84et4gNL++8Sema1pwqzWoiCa3U6xhGapsQrmP1JFNwBPRaQ3myfLrvvMIFFMT0/bQ==","shasum":"9c25b0e83ea0e2d3648e009d7f4824658ba17b2c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.eafb7991.0.tgz","fileCount":16,"unpackedSize":40751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDlCRA9TVsSAnZWagAANhAP/Rk+adhGYOqvp2iBNEie\nWX4GGgpHWN4UHLkycv+0gf1XZRBbSihTYmjJJWoQYkH82o90VJX5ciQHxK8g\nGjYtZ8+xyW334xFBIBZF1cQgNT4qmK5UJdp79Jyp8Ra5K2gyQrUwi+H5K4BF\nsUP3b8XsQd6DPzYGzsbO+ZUCyZrmhdz/DSWh5F7KMGdoWOZPpWaX233/k0rx\nHGNaTIxT5LAcOCNtsxi8rWBG9vK/a3vldBWEmLD5XAzat2YPkD6rsmE8N91I\nSqoaWf+PVmGRT/JWn6y890JgAsI8UjHuFNoEXhwfejbRXKOZzAz6hfF/MRsZ\nJLMc/zCyCdf4lJ/JE9Vveg6wN+05iaKK8t3CtYvcV7WRmfC5+AgU/pwJneJI\ntvLVQgtCtkxkBJpjPU6LYnqqA6ADBO1PmwsvakSwcbIQyVD7J+mXW8A0V0qF\nDlP1CqgVCyRhLpoKAakV0WEHbfvwS/vjo5uSKN+R8QhKIyzHNkjvyNmMBTgd\nBhjEE58kK6hmwOeZ1bVK4/2ItJUy6bpLfP955htqjIU4t2oZLAJodzTFQ+hd\nZ0c0jGp9RATIo6pRtcilAnhI/0eR7YTmCd2Ioik7zlyJHdPcCKpSrdocCsHK\n84zrkrdDAjpS98Eo3m20lbfrL7qB8hKj61+AJkzXwya/5wA/u00pPkfuudgh\nUTDw\r\n=AMMA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm8jSvtqyIgaN+1LYXwVJLaM60WgHkMBpSyf/fFdupVAIhAPAgTudGIzllhiiBLM0G0EF43D2s9zV9wM3mfg5w6UnZ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.eafb7991.0_1599013092991_0.5934214738907562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.606642ec.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-circular-progress":"0.19.0-canary.606642ec.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qFMJhFv45s0+AzZ73c8KKg+tT1+7L/z94mMGH8zVE8yV0NDu9cDh61oszp1Q2IdYzf2ZQe2UCfnWyGdD1sowTA==","shasum":"94bdd269f7aafc5f660d9ff97f9fb93d7c481461","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.606642ec.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAjCRA9TVsSAnZWagAAvVEP/ReIBX0uHsPSkDNDMsIR\ndTSi2C1MyJezZDrVYyR/AhLFymXBuUlQhC5hVx0vZBm1hhenm0XUhu9fNcBx\nLARwAKlo/m7xoPDKi6LFG5PYRLb2vESDS6ZXeAuI3UOJGUtbBmO6tXSXsZFq\n8e9ZSy4ZnjHjhjGPc9IJM2xM9CsyCXR+TgAtnYUAo4jSS+EFJK1jHfip3gK3\nM4h++4dcxLEp2tqUCRhVbYIdbwPrn0hPvCMs1JJXrpld5N5f6BozPTchoSq1\nf9BFPsxxMhrF6Nef03yClWRPh2ZVEI/PJwyRbUtA1DDLbXIj9kIy+Ar9DeC7\ncVQDdEnU5mxkMcdJ/XHVFySDT19k1j9osZ0tEohU9P9CljlO0QbGYXnOvMdH\nwh/kDzLH4CE+e4pXfuVL4rXxeSpgC8sUOHc7ngCSRx0i0Yu7LcnTEP/zwLOa\nQ7+oUBsP5xz//4dnWgTHKK0SfQN966UdWnEz7KWsAtZ6xGo6yzmpjxXcMfGd\nybDTmYm2McmCpjZj1ToSuuK2H9+huxsVhPSEwqb839oBtteezqWhsGsDDQRX\n8A5LAnZSxtgkzHFIoHdHC3yLZvsAwcTke9Wab996aAqgbjjg10ryl9yCB7E3\nXOCl4UQUFKLGQKmkk84de8OhOssFaguSWAFMeNxJZEPkFvQeuMZd3FlBS4tn\nQ3yj\r\n=KfEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgZN67+JSBSyvetMscBzwCs8vNebwgdC0Lq+MNFZVu8AiB+KqMlZ/Bs/w7HWc4QrOJe3AOSUIaIzvSoJ4ln/VRWtg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.606642ec.0_1599082530686_0.788334170407333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.ddf05c42.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-circular-progress":"0.19.0-canary.ddf05c42.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-COeUfJ0CpgpS+zu0znpCvK5oKeBBhyxTkcQE7IuSkuh9dB3agu3egtTXXL94j5XvYTWJEi6o725qilzDaOCmwQ==","shasum":"b707710599892f2e86f0409e98b4e88ef2349121","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.ddf05c42.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPU8CRA9TVsSAnZWagAABPIP/iH9leWzqE0jP6KSUln2\nuODemwpG78C6qGDX0uhsyQxhoXEuZZbwZwdvDNEEAUfMN+LgmbBupaWrCdW7\n9gTzEuFQSG2RwLHW3vR4aIY4GAg3PQ2SlNa9Dhp/WscWjJJvRm02cijcjKjR\nmSr2b/fU5Jqe7rwmG2LFBd61zrrLNb4A6mlGcf6H+k0+zdpNE03i1hVTim/m\n9IfMGTNeiGP70RaokgFp37LWFrRP/wE1NqgAtKFLmqHUMaZmiX3qU9R7c+KL\nqTqIulJW35YEMUwKV8cx0K4V30OLSmrp0UUMeBvYAIBSoZv85lHIZ0FyPjcE\n6Rvmfw9zyIo5eqFn4wn+fMPnV4yZ1cWGX12UY7I71/Y3nIPOQ4biTkQaQJC8\n2yaIziXQdYofg4j1JtipBL9SyKv2FiQlzM0KzOdk5XmwaM2PxqUACNZkH0Rd\nuyhJoJejn/B6F74NG2JdGOEy9Rok1GJn7M+5a+3wKWXJutY8dOwEzba3qdxZ\nEyEincyWanbeWWZG3xCqUVI+QJwhDkI5/TQmEcUNTUxZw+e2jc5bYuZkY2SE\n4rlIQZ8aARZ8d6kwjbohjTMSy3cjFR8hLul8jvfEEPiBByNyWvM9MC+NA45q\nksCwXd8JcO42yObchGBTaHJ8PgwPVhyAtwnwk0NGJVcYk54BPkH+tDnl+qbh\nHR0F\r\n=qwDq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3zyN52Ron2qjDWWVkREH8XRAlkU7zLdmTY5tgR+0xVgIhALQT14YjaZrSPE9gYah82F+fBNohSMTcGCt+lfcqZEjd"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.ddf05c42.0_1599141180398_0.1475669486312121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.b889e6dc.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-circular-progress":"0.19.0-canary.b889e6dc.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xLhH25iS6lPtRp3DseF6k3Ifhw+zGAHmp4pdO3elll7X8RhX6iLuNF+LBrh6f367G/X1BZiLA4/nXTCdBmyglQ==","shasum":"b5a49d73247f535adbcb8675ea204609df0fe5e3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.b889e6dc.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPl4CRA9TVsSAnZWagAAAdAP/2HBAdEqotSFffgv9Bas\nIT+Uh+YEu0xaltQApgud7nmf9XtKh3r5mA5jW9+GB95zGd0TMzt5QjVI3m9H\n2CqWSAZyK8k8fiWH41VB2L0XrgbBYF2M7h7D8AEc0CbfIqIVoBIQYJ6bXD1u\npo1KB3FP79Ipu0sus8Ukxmx1xhPGqLVJiuiQ4GJH+kUJjNsyEwU51aXCceyR\nDMFJlBQsgvI5zUVOtbahrxUWU/Tf4i75OXPeIY8GLXrgTZIGZVDS1Le67zz9\nGRTrXJre3tsZqHRpFcr9rt15mgRKQneGUVrXJk5cjTAlsPn1aM3/I+z+udyA\n4CqPbRQiJrpOYydIVHRsa565hZcnrhRzCVfVwKqmm7SyTYyDffDV9QVMCxSx\nLeY/rl7OEOwKHRQnpu75tDUnEGsi5CEhoD48i2A8oMpZ8yD3TGnGJkrbgeb6\njp+8rsejVrzJTZ+s2QJKvuR5kPCteQgtzC1UnqQUE0pj/A2AxBG8SumBj3Fa\nWvJKDBdvkG+WVUBrKacci8N9W7DswbCkU4eg0iWqSjYtXEt+c//7FGu04rK7\n0RKJ4FosdEQmjwYAW7pCEiYEaSZmGO0CrJhf6v1Z4omrrdUMsf+yxeo9XmHH\n8xmB0Q0pNCYOVdC8GcLqKE3iGk8zkrwcnoJ9NHthHj1Pdmc2Q5K/QxLrvxJQ\nlTxC\r\n=ftxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEh9WZ/VIB4g7iTT2TxcTtUXrYoPA6sLo2jhJEmJUwUZAiB+UE3xtWbf5s8a9MIQX20S1k2Boq3RJ/uxTyWPnZesQw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.b889e6dc.0_1599142263959_0.4762397879060307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.aabeceb0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-circular-progress":"0.19.0-canary.aabeceb0.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OQKpULgy1OHN9Wnsw5IxImxFtbo2AVyg6EcbgpIE18iNse6wBGW/7xOTweUgE3WcGDOGHq735t23yCXin/5obw==","shasum":"dc7a197905481b984eb7b78ab9ce515276faf787","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.aabeceb0.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqmCRA9TVsSAnZWagAAnpgP/3cczbCLpoHggxJ71Gov\namGhwwmYmDZ8HgYrmRKUdUE7flVlh0QByCnP+wL8PsJxeXBgX3llPiGHAUyc\nXVh/lQ0Rz+FHdc/lnFGFgwWNaiS9izNkWsZpTiyj2X4uXM0RgQ6Qz2gcLg53\nXylQjbci/tYcR5Z58jBbQyZ/pVRsXzBL7W+8jpo4mlZFP6CgvK52W2dkbYfU\n4AlL9HOmsbpbGZjLSPA41wAgE9r9G7RkOIcB9EBaWqsxwFy0es118GOeRkbU\n4JUJTQ8LejrjXvKVIjgYDL7tvRJql05UZ4X9Gci+5hoEYEtcJog9zfvX4wc0\nFHvFeyZiEo2pw5V+1DA6pK3SSpIvSvWpVKlBHriuoriWVcVEAT7X1DUNdyQW\nS0xtNbLDP97BOml69w9+0SdMiF7yYw9Q+q6I4XKn1wSCOr/zr+JUEnyKCLbM\nMM8ehJ2R8QajvyveT0KpgQ+zbJSae41XTmB0Nq3VWnbLklfJ+roAT1835mm3\nm/oJlsp7oRXaXC8vefeD6pxc4cFYBVz7ek44aLjCtD6Tx4FvjJM6fzjPaaKs\nNwJhF8eU6vM7cXj1ii497gjd9Ga3fCHAZXgqCFdw7T1DRy5Qry5LZ7aV5eqi\nlWKP7OyXTQCcqTIWGaQMIbPTEJuwlKitP0w3vuM+X7qg5+MgvTy/0O2Ocy2o\n8Tgq\r\n=3u70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVTNTWWS2MLjYv5ZGARdvjA5rp8VCEIuINPNGbbMiL1AIhAMukMDEwO+FjyaaHDD2PWo4VxR4v+bWZKWInQFOu15Tx"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.aabeceb0.0_1599163046167_0.35386583320184006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-circular-progress":"0.19.0-canary.d8cca3a6.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ToFGD/7YvLkjREBW3h1/JBma1P76BpiiRmlllrY2GptTWMluHNKPZ1wwTy2CEbLqauoI3dIQGhSC7OwErd2y5w==","shasum":"536529255c686b79645262074717b6508817e56c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.d8cca3a6.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCxCRA9TVsSAnZWagAA2rsQAJuJWupmOfZHzOp8vVsh\nd+HrR6pJP8/uiGLp83LHWl/G/aNikovbBJvPvVd4NpuD9hAwFDQpWCtGWXV7\nRsDkP9uT/lC0JJFL/EFB2MQCVrRnHwZ1EvENAEZNC6QoqgJQddy9JseuH4wG\n8cv8Wt9DP3xEVID1l6QG2dGnFvSpZe8gHRJaiEzEgdNnJA4SoZifC7RzMCIv\nadZxwXLq0rzt1rG/gIgLM7U3yvV0ScUFTjK0lUp0UowUtQCyEH7iLZyHqzIA\nVcdDxbn8yYcNVyO0c2Da1WNWWNOS5qVg4KEn5/x2G8tZlaoKmjZAFagkGE9Q\nzmaTdj1Q2n1pzb7LDKGKKqMHJ6Pb2zds6zl0qTWV8Jhebw+CvElfd0bYBB4N\nxOs8gKkdxPhaMjrU0LTbxDtgB+6Tnr3gU1CjZMcvgUGsLkKMG9UN+DizMb3n\ngmTo2k9GohK0ocihIKN5lnUDqc7WpouPmdQbR4RVDgwen2UgE8NVlCJ1B2i5\nzYdoRUBLYLfBMK6+ZgNGd2U9x3fnZ1j81ui6StAQ6cI5lzDmnACktoqeUoN7\nsoCv7tD2EtM7wGT8Tf2+9FmH/u5LT02T/zOfDJizIOL3l1zGgFXxNgnxz7s0\njS7ie5RuDCPpWzoZ4et0mzhdImXQV/haowDMviOGjO0HQ+LC2P23dAeuz70O\n+/9Z\r\n=X30S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRNyCs9QZVM+h3aPU2NKAEX50BKfdZhxYr5pxSCsb86AIhAJPjohPBnh+RQ4zaHEvmXS4depJ7d9CyIMq3coRjs36J"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.d8cca3a6.0_1599168689324_0.3872749913276561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.26d34b2e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-circular-progress":"0.19.0-canary.26d34b2e.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sz2M3a9NUtjmE/T3E7r1iA3nvpzfknjSRJZgR8xVb3+tKsEuwpO6qLz4avvSxuBEZ4O4pKx3GjvjTriz4oBqoQ==","shasum":"ba14d213b1b349b83126912e8248bd8b1c0dac3e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.26d34b2e.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWahCRA9TVsSAnZWagAA2d0QAI+X3362xIUugHUz1Wrp\n77Hf5lY/zdf5ITZNnhBtjM5cIUbEwGtKLftL8KciGQQnnmJzcDvHUUtvgD69\nP0jhJZV04fYFZJmdnOgW1xrugqTSEw3KpJ7nJXUmGud3KkKODsedDYsAh+0Y\nasRoFBkbcGTTnKLl4k7cK5glGeOXmFf3Ve1hshaI+XcJkXJ7nmNVpsh4g2NI\n48whMmJG5Yq/n4XCrmQ/OsHD2T8pTe+h9vh4r3kEArJ/xyXWLE7rxawsamTI\n6v8jUlbAB04VH5T3wUqDRM0XZGTb50HWUuOAsuYJD6vzx0jsxzmmYDJWSom3\nGcK3yZ+J6G1W1U/CujyNHKGCyJhVE8bL8wzvfeFVil65p0YOLxNgJcnCBSBW\n7luYirqmvMSBs6Ru+TixVWWSxjRCGEO2Eu0Y4OrbdqJlnZ74cRhLCMRrx2W+\nK46D95VXj2ug92pGY2EgHBGbGmoUaCOxRoJtKS33p/xXy/d+mLYqiSn7TFbz\nOZzAXuVm8ryX8oww7rouNFyJk73qlDM5xnM3Chsc7tNJ8krBUEvIvPZ6Ovbs\nvubTR1XNogCx5zn7cyoolZESm9O0KRZMM/gteTQZ5xfeC7F+uoFNrmU5ld7R\nsTUN06fiNyZwFSpv3QWwtlgVNLh133PPzH2EHORB3UGUfIlkGC3fp1sp4PSE\nXYNZ\r\n=h6J6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdBLgC9n+TtGgqMPOCH8dI/UIo8POXDJPmbxuPF5mUJQIgA3g4nUwNBK+8EpYCutwF8Dmhuq8rlcoYXd853g1Qs8U="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.26d34b2e.0_1599170209022_0.4032011726599274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.a1c44494.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-circular-progress":"0.19.0-canary.a1c44494.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VIyVl0z7f+2G0s0wFMiJZVUb+J38ItVwFnpAD4tAg8dX+I7TOGR7snhuSGTZprMewmxolO2w1Te2XgYz9MpWcg==","shasum":"854799e7cd2a2e02dfd12f0e349bae716f88e34b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.a1c44494.0.tgz","fileCount":16,"unpackedSize":40858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIjCRA9TVsSAnZWagAAsqQP/2BVsEH59WNzUAV8+XTC\nDQhtCrOcdari72zBeVuwkcpnthwUDKDobPQQgkUPrO0YQe8INLB+fCZy9jvb\naryw7z1O9NLlayX+Oa5RbFbSkv6Htom+7jL2P5TOW7veR/9c1aIzuDBuVcRc\n9j8DSHY4Cb9pnwEYZKYklxAI0HsZSTS69KaTloqde3M7beaj3GkFTNG4K81g\nsWvMY/USDG6Ch9rjXffjH/z9OA3+7DqJUbiE4k7nKddL2dFyX1ZdszSJnbds\nW6xulKT3EPAUg254Kk+dA9pIdGPbbhBRoFA3I9QRKn/TkHj3Fss8KFwLfKXa\nzYiifpQYtEVjp54mqsOA7lx2WoiiHIHZBtRuMjFCW1dYpfIVvMjL/tu2jST/\n3Wo+Q0XTUkCqGwZB1bzV5kq2wRK7+hjM54WA9vqyYWpepqXxaETCj+cYlMy6\n1pbqHlePqQo6cu1c7w/T+L7acUOnoPKkvvQzPuGFVPEr2e471ZZpyYaH32ZL\n8xYNVErlPEfXZoJY5zHtrInNVwSjA4sSfjbWdq/YynKf9s5fCnVaKdJqIX2N\n10To9B1NBQDDeNzkzY/mw2AYIr3YrCRHQMfrJNw5KuRjY3TfJT9v2WCnzI+L\nbDNjxm3fWfv7YPG2+LGhzjRhf57zJ0vySsvOOCltHpM+TlRrc1I22HBcG+Cl\nzaNu\r\n=qptN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5gkfBfVsFHgwQrTclawmPg/yZoWJMk9xUcgvQD53HCAiB/EUmPe5+kwuF5AARHzt76fDCa3K2Gt0oa+ev2g82NmA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.a1c44494.0_1599689251431_0.02490210674008453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-circular-progress":"0.19.0-canary.be1cd1e9.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Fh0yG+KYFO5QrqZHOCdIEp3cyj8eDyzUr+QYbnlGjlTsJ7a0/w72vCekN4ZSc3IAD+UBzY3lvRrwFtbrOtzE5w==","shasum":"be0b768ba617bc43b1d5e25f803f46a94e425a1c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.be1cd1e9.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlceCRA9TVsSAnZWagAAvXEP/RsBbQLjzS7YViK5H3be\nTe6hnOf12FsFcooBIzSKGwA6/m14BrWe8KMfC0+pG8j0KfMlc6MSLYb8HdW3\nMXtyj77lFpaKu9u2XB5P/VI3TSocAldu+4ORM6QnfvzNCrJZ1dAjYgkNE91O\n/tGTb1BghKnRGeQ/wxlhgmYqi7yZVRpFCtXQj2KRN7MUE9+IF93D1HzizOjr\ndNOuoQUnMjga8kIzvVisRDDi/sR/RrVJDov58pIye2llKJkuy6khXlDpCOal\n39NbqfSDXReByZ+dGZkJqxQsFKX/Lyn7zQY/invsbijgtYGaSkeVBVG4q2Fx\nuWnFVCigq/cmlLJP8opFvW0V4wh12m//gCw5AQAls0hygw8Kv7qTJY6lED0n\ndkJVqBD1pVdh/xWNfxqgz+xnAEuJoclpRSMjO1l5tkPCmD3MF7JJbbDtwr8z\njyGbLMSklOj4/WZcsqKkBs2RJfK88ue1okb2U7OAOnbf3hmQ4RTsLHMmldth\nDAFzIYHJT4dce6SRNVCM60e6VVK7CVNFU5m7p8flUZGXuVzVUW63Me8PL0s4\nf0DThOUKDFPPylA30CqQypGEzCFxGkrS1zZO4VfQs+/4eBj2CM/eC9RMOYN/\nniGLsJkPHGhsvKQd5ENAh6CUv4MGXKcm+UUw63105hk2VhFTGPHkq+I5hw+G\nHcbZ\r\n=yViY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBImBhp/zocvnGCCo8w+wiXLVFYP1Q+0pHXeMElXgFXqAiBGEbcRFHx9ewLrGBTyQAx4OSZDgE/teDt63LifsWHRgg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.be1cd1e9.0_1599756061775_0.4889287093629353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.f094c0ce.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-circular-progress":"0.19.0-canary.f094c0ce.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NrOckUKHpaAbQcCj1EL+wu5sHNlgvEF9nAiHs1Ceyjl6nOpBLcixROf0bXd9O+4Y60fQKZ8esVtwkk4gwrmtxQ==","shasum":"f4487e7a069660ded986b755dfd45ae046328ca8","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.f094c0ce.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQJCRA9TVsSAnZWagAAg64P/3ayj1IZ0RtWoRKbScOX\negvpvaG8XM1BYouG8whoWqgGaedRo0NtVwyw2/UigpqO198lD/gDAZzoHqkI\nrn0bxr9Prf9XhxQpIiuT2b2L2eC9WzRLk93MaL3src3pJvgGdyoH+5e7GXy7\nrFGc6xFW4bOdTfD/GS+gpRcjuAzqOFO9rr5r/VmHH2WPlZjRmVvk2gqptni+\n3K+QBxUeE4hmtkMhDA+Qth2sZDsReaIyZv7yarmPK3mkpVmSm5vMSL+i1rnL\ndalwzd0xkDho4RhlnKRHLyY17RwY+W9tp10vhh2PUPJqxryda9L4ytEvhuVb\n3kaah6YLRij6kbTvke3a5ji8ISbfE+AJmwSkYfY8O33fEnbhmVZ9DdydCVuk\nmaxpZYM8jQySoP0GevB5gnTUCDJEhonW6So+KdT2SwzDQA19H+DfIO+WSWor\nlqXVBWcX3QaNsQ3Ks0ix3pJoh72Z33FMS5Mrh76dyr0ifncd/9daDLBaiRny\n7b5I/MwgW+FwBAQOo6SKIKXrFj5taGFitjdud6kTqdW6XYnSqUGyc6Wi7hib\nErMT5V7r+/bpKaIa7hFqRFg4f8FqSWiRWMkDWrgwqUWUHe/arvEZKRoUySKo\nwWlE+AmNvPyFkej17AsTstXXm4hzvPYVNQAPuLYOkQMdTLnAKHAaGXZa4W+j\nD/Gz\r\n=/z1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgftXX8UNh4O+Ez06Kaa2ucWKn0NiSIqgS2h+Rd488mAiEA+CUKFzX1kZM79Js5rKj+HvVNNdBuknfAEx4HAyLi1/s="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.f094c0ce.0_1599759369079_0.18393384413831426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.c1261e7d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-circular-progress":"0.19.0-canary.c1261e7d.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MpG4ufzIJmQr5R6dVUtD8wOdFQU6yHNWVxMRnKTPGK/BJ2R36MTEEL10sItGR7FLEbEuz0ZxQM0EJfUNSGfVMA==","shasum":"4b188a03733f0854e62dcb8059a7bd93df2c9fe6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.c1261e7d.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBECRA9TVsSAnZWagAAatUP/0wYsMI/OHPj5sYKvP5Y\nlnxsrkkb460KKKRpESGLMZKsukdo51fEh/zBeOxs3jeJse6H9tV9EmO2FqXG\nTadFqK3ohVsi1Uu/6G1zJ8/U6gv0F6FPfafvTidlfzBeDLUdshlCV/2xxvTC\nCFKwc/hsbLNt43WBEhE4x6QenhQhSlAzoUjKj5V3ZWzxSVlhKC88OfVy3QXT\nE9pab7HeweVuAILhgaafz+/eAxbBc0lwDfYBYfXqhv+5AFc7KegssazxMiZM\nJsLlEQyz1pylvmoZ5I5JB6+afEag049ngOfEuucQgBP2hDeNN8R2a5e32uAq\n7GMbbJkwk9ive5lUJZ26ChzBjzjBj+Id/tf9Di7qQNSjY04oEJycGyf9J/R0\nc6KkVc7nDSJ51ZkR6q0gt/Pd1k6k8vTgbY+fEMc6jMjOpcdPI56XNa/vSBPR\nW+OJE5EhTbJJKYebeNgIFnQTFYnHuKE4xb8HwTV2p6PS38sPC5SfihcBpuhA\n4MHJSNQCVlSUGUYp7ij5iq6Ju1WTKXW5SsHa/mmo+e4licru/qOHx+tMyJT3\nUkIteknOdheQO2E7jBS1zDQElpX++mBGdWumCvDvPjha9ItPVI4D79JT+olc\nCqs1EBdP4054CicLIkFzXo0xL8L4P549rWwe1E63iwagit+LqC1grS3WtTQC\nudkZ\r\n=5rim\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1966rWC2cPVENx+u0CZA4/o1Y6ZqlXmkcvPcyswt7tQIgBTVXL23OXVQef41KgEZVM6v1jDG6nhOnaGJriN7rWsk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.c1261e7d.0_1599791172311_0.8712595173712991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-circular-progress":"0.19.0-canary.9b39ed1e.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UKTlxqaQXRgbFDUzdPDxqSurMBJ++ZidbO378S5MErcxs7Zl0LMVEbZE0CGVOQz3SE6U8dfPkndg6ZXCgrOIuQ==","shasum":"767dba6c52b308af944d947674cc48b9579a6682","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9b39ed1e.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuB9CRA9TVsSAnZWagAA3S4P/3vnnvjzNJdxicKDAO5I\njeHH11dyAJbOiHPJbtQXir1MSEPG2H2lCg07oycwVeLz2eQX703WPucAvfum\n1aCMaXWHNnCrT7GTBieOs8nMY9bIqpDvNdmlyuJn44/aUUpkNHiDPatMSXc5\nYO1AuscD4R6As71HgwzBSexpO1/lRA2ERm9kVAtcUXL+WayG3AEFYztb7UYO\nHmpWWyRqs31y7X8Tz4wo0YU9IDiIjueDrwPCg1/4enG+0UWN0zkj+KLzOgnj\nLm/uLbRC3Og3Sb4uShbTKfc82wFaqkJdH8j2wGpbnl7SK0h6BDNfHa7OqD6D\nKLtBpRpYM87XVz1ER7NbcF+OgmZvVTX4b1aPsPrAIiJU++JNugPypkkJReco\nzGN3h/+YU7f8YQmKrsrJuOXES1v5NNIlU4gLhPxT6Lg+1X6tfxZc5wI5cIaM\nDZmrkJSS8Cz4JUDgzRBCkr0nKGDop1PFRRS5QOJSWwKg3QOr/wSWJSAIs4U6\nlomoDMKbIWRDRZCjO2j0nJbfirnWWqTQC96pMlQ/e3DMg/a5rNUls6A6ZLMv\n4gnYwm790vbuERmMQyzB3yz+0NFD0fK80v1QrLs/T+qJZXBQzWHGSSXF24qF\nXcni+uZJ4+HlC3pjMw2yz4quDNxGFiCktg4EuaeymxD+EqDfnV+5FYi3NQtA\nXACn\r\n=ymQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBGQcyaY4Bo5KKfompu4XULNsRjx1Lc5ok1K5OjtugmAIgI9XttPErT3H5f75ZbDAmroUsqgthhLJ1AjCiIIcwzMA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9b39ed1e.0_1599791228853_0.025430765100064923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.e67214b3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-circular-progress":"0.19.0-canary.e67214b3.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kFfw386LqoOzSI+gE0UeNNrjdkUX4OxrNIA5PwP+KtLWalBJzFCBsYc4MQVtz/VczM0BA1BiljQe936syBUrUQ==","shasum":"4c4a36f1c17b3303f62c3154c951c7b6524df0a4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.e67214b3.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuF/CRA9TVsSAnZWagAA17EP/AnQM5t4Cn56oCg2GQ7N\nXbEvLaYFu78YL9exM4MlVrokQeQjwCjXZkB8aP5B9wln45/eA+4lDwH0YOAw\nrwjdU7lekpZKZhfw8b4nEnGysaAzfsjlKuNKTanT/AEYmJFbdf29V8gqQ4j0\ntuk8Upc2ZuKwYzakrUjMUo0DNDqEKstpqI/sWa0Cd/dTTKrcpRr61EIvfIMq\n3ZOfW/vV6GAcfS6tJB4pNs2cFLd6CVA5pMqdsnSrno9LKAi+62uMAek80q3D\nA3Jy8RxNN3lHEEOP3aEEbtBEXwtV168ZIcXBYmYF0EQEnqEg50oGDFlVML06\naiznMO7XLtSvz6zzmorhTROTeqZDXcWZdxpt665DR/Fpzskq0dHOhnXHhZSl\negyGcKXB6Jd3XfV9/Uy4jHXASphvUn+G0Gph2sN4KprDEFbTuJ+mvVonOFqn\nosflPpstUO2skyobeqtHCsglt5aZfEJ4uTmL06Yls8mH68knMxcE3NdUNUil\nerTov2cCxWiOy04TTiNYtHv8jKc+yeR3Lvsky7vU+j0nxgn15s8h1sWTnsNc\n6GUqLG9ZcAuRNfpWNNUUOg85Iz48XwiXru0kyG7LFDfESASVF2EJ5KgiJTk6\n8aoRvMygfwbYERtcFZammpXeBz8p/NGSMZBDllL+l00x6sM29SXsRPVoS/s3\nu/NL\r\n=Emqp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXoshZTK6jnmkYwmoiaCs1kgE0ffHdNe5BXx6gq+b3MgIgX6NNio7Ll/12vWePEyFEuhIp2AjA60a9JzCJ8lVp/Q4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.e67214b3.0_1599791487112_0.34555423677353336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.36f5da28.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-circular-progress":"0.19.0-canary.36f5da28.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DUNwcrVss/zGGAeITJtUs/H/lwg0jOsMGo41PAWGPX5igk976jUKl7bSR+49B5U6sjOjU7ZDlIw3Nbd8tk9TnA==","shasum":"8759afe2cbfa35ad7839305b1fdbb928cb2a6312","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.36f5da28.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIgCRA9TVsSAnZWagAAC8cP/2jUyQ1hEw5fi02mashx\ntF25UywfNe5oe9rabRwWI4LkG+AANXHipBIKRiT1wAgNNeSMm5aW6G+OYXxq\nLw7KQJasWRBNboM4CWCh1CqS7AY8WrdtqdSwjA8nC7pB9hNtqUXirs3bxPoV\nRRVqipVmlQzRRiNXWcNKEOwi/npKHwbFeyGFpkMWXf3k70EhbhIM28cCY367\nvLakMnIsxxJ8EeCSrAEehfPfxgUqR9mY17fnglCP5rLNYitcwyS+aEPTvfkW\n1h6uppnUxW6xVOt+bAsPukZtyHUnA6EsoDH5qAiIRxdCnA3kGZ7B2lN5KiOD\nUFlU/uYlrXo2iWIyt7jZ2kCTrtLOTVgKlJdL5uC37jwyPnrpNGOOZ0IawTJD\nb8v4No9h27sIVjhv4qebFJO86UBbnnUlsMNe05tXs/Wune6b8V+Ec66MF/zH\nwNzhT4u85AYosNlR+2um5/JvWAeNPZo/pzSnlJwSnGo0OKziom56JQ1Fezeu\nKrz/6A8VXMWl3BOHBj68ETAa7VeIA2Z+fOAJvlG9djP3WFdQbz6Show4MRMB\neykHJuGrySMnxM8AfMxVHCVIa7NQJG6TK2rty0HzAWp3jZDCS9MOJOMg6Klx\nxkXQb41WaFPMd8UMg9W+AKSgr9G2PUZrPTC7q/1VaoRrC77UWSw+G46Oma+i\nIGoI\r\n=GIw/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7lXfZhsamSinIKg4iKP/8pll2V+zKIlVRS0pbP9RmRQIgaTZ5TNDTcoL2jF3Q90iZGL7hAXkQdD2vQ3sCsWJnCU8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.36f5da28.0_1599791647623_0.9471195869121007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.3babab12.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-circular-progress":"0.19.0-canary.3babab12.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aABFN9UYrduGRzOLWhbyVDHQvyNjKq+AM8FT1q1v7OqDuevN4h/bmjLe/YK6/puaOxJ6FIGD6WXtEn5xyCTTXQ==","shasum":"92021049c8ac65547aa878506020924be138d036","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.3babab12.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLOCRA9TVsSAnZWagAA8wYQAJ9Jn7MB02xmtR3mqe2E\ncPRoJil1XY65jfgEn/6BO0Azy5Hl+1PwOh8Iz9MWG8p4YDp/01gmdPnGliuQ\nStLQJJItkNMoZUQCEgp2zIVxvn4WhACeJAnrui405IqXQrWPXiWBEoINCye5\nk5jqpKJtDtih+ktCBezT+ngX2LzRfNPF+OZCy5NMtuwzRmIbZTUsnDizo/yW\nGQAGJUg7fi1B94qJiYIe1onqo7doHMJad6xKYftmU7z2eNHk94bfT4DtglVm\nk0PwVvr+sc7qj159O6ysIsLxe4K8Mp5YLSJEye1FLV2/oPCmDOC6S6lA0GMx\njTMxr6Rg8HLihWaKpDOBgMBYT2uqQjAt7ahR9IGGBqYXhcb1ohKMW2WvaRkr\nXCjnhcC76GjC/xNfhAMvkdfXccy6Va7/X2SlPzMlRYEuzWlnGixo88uSYmPe\nbGs+asOV590szgM2OHgSgCZeyvfhaBwlf4YRwtbQuF5jb18NtLfJ+CLKj8yr\nfqZ4v3vh3j7a3liy5YoRHpSOy3VnEm+f4tTlUx//W+npD94PiMeiSRHRGVed\nkbGPZ4EsL2cWMmMOJBVHcQpHJRqVfXHqHupZuvT5aDxxy5YDz8xqgkyNIVgG\nv3OBPxHBNVIzZtyDcC4y53d55a0SGLHx9t2OWWizDf8oJahZJbS1pGLn5SR7\nTFPn\r\n=kL9c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGtskgns4MXFlUNtL9KjqYfowOJ90g1gcZXKzYC+LkvAiBwzljLqIR+rgSDKYE+rbdh+VoEZ+LVtoNxjpexe4k1RA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.3babab12.0_1599791822258_0.002739074274596298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.a4481e6f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-circular-progress":"0.19.0-canary.a4481e6f.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gCO2aDShfAC9JVgU6/cPrwXcBVhuNvUZTxiY6mE/kWpg1vEHllzR5F/UZY31PTFwswOCEEzsQqjnTI3Tg86WHQ==","shasum":"32e94e22cc762d3ba7f312fe19c58e6319d62893","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.a4481e6f.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWqCRA9TVsSAnZWagAATM4QAJcJOJp1vDMcdIkQZt+V\n0qvTxHpmKS/FLgGe99tJvQrUn1VnyYrbYljRO427NInm5umK2XBfqwkD0IcI\nMaKr2y6CzXRsBG/OQWbOQtZPcz3UwsFxNnARWIEcOxdV0cCyiOu5t3/2TQ92\nS5h20PYSCkKVbTEb0g9Ui+qpbrAJLw5iYs2FaVTgZE6sB0U319BDJ5bbjXwV\noXCPd/ylrZyDADDCsmUHnh9055uPogzFKocjUF34QDD4s/Eszs/rdgpCyioj\nnCeX/4quNEPaieq2GsDRY1m96GSlwtokIABmTWSPbu59b+ZtCPRlldvciV6l\nA282DTqj0OtkDAC8gx103aq5HjY0tVqhXe3OWHW9+wYYxi1JRnRlSVcIfs6c\nFHZkvVqnLn3gmxElGs6J2H2CoTan8vdjjkNkQmb7X2QtQbagcqHEJoZ++02s\nscVVYpofRjFjI7JD/bCwPYTOJfSfA1fyvH1DRel85TTbiOGQ5dNkXio0VF6e\nZUgIlosoiiVxPocRvhQ1CiqCXph45hU17ui5/a/Uk9LzQ2XxmEnWHa87rzYz\nBsrRhCkkyTCEz+Ur0RWZOVcZz2W7PJhzSpkpF4D0tqBDPsQqMvtr12IG+C5c\n43mw5UhXn4ITHjQweRoMFN3UXtxldTo3IOEZ3ot38UwyFSB7ZTkf5hXAsdHN\nHIp5\r\n=/X6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFtcJBcM3rB0TKchVQ4o6e5d01CjBqIRL8wUW0xAwkcAiEA2aTzyYf0fxBdeVTiedS8JnjCh8mc9Ax0KnY0siewiE8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.a4481e6f.0_1599792553679_0.7799351645211687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.a9177836.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-circular-progress":"0.19.0-canary.a9177836.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CXqlIL471Vhq6yf22hq4Hw3wvVUdZJMkePXomuAIMC+2YbtjJyYzVVVwpnhfycD4+7WUUOV+K6MSEzIPzAIO3A==","shasum":"664ac6b9e438a583b637cf04c0647c9e82b38a8e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.a9177836.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7gsCRA9TVsSAnZWagAANi0P/1cJAYHW3QY0eGDSOabg\nblVkks20cqAuh2ehICgyWsawApEky8pGBFeWMK8AKcJa6qzXCwpn2MIYiYaH\nVf17iNcEpwKe6Q4vBcYJxYkVsyEVcXi4eBzJqgbHnr5uhGW8L+pE+aaXrK/E\nFnLzqEuJJ2j1bOxvvOX+Ue9eePHR59IKQT+eHmuyfyCQtW1Ui86lRKdKuyxo\nwg+b/8ozibtW5EbICBEJ/s7+f4QoWZi65XqsdPFW4ey+W9BRv5CBzd4aF9tN\nhli1zXU2IwtN4gZWWZik6W7t+L+i3P2M5jsOpL8swW329FSVBWd1Qn4WvPC1\nZsFheqXATlLtjiqWFoDQPd+Zeg4hpfH0EhQpX0XhX29JF/1JySybgyGS6hhD\nS+86DtU9oKtiSNtJaNeUIUOMbYBwG8mtbMUyU6dyOi/U9Y5W07YIER1lDUBW\niBWn/Irr9QwkPKF/U66kO1Le6+ERWCeuiH3P6i/yO1nUJFpjP0WPtah1qHIz\nRTg9IpDyA+6CKefKVvipuNzaBHyczGyKevGktVDI4LM3lGlliJeKXSz2FuBo\nGOuutXy+4V3w4nXrFXMN2sCJeMqsHV0zfpnyLuRXS7PsYRCMIuDjhqnTi6/1\num224Lv1rzlNZwRd0tmG/5gU8+PN8Ome4Xdk6OxuWPztSnZwlGiSg24/sUr6\nRjSF\r\n=gPY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQq5z/eOVXGo7N7qbUH4rKSmVeLunAXCqD5yISjOUmwQIgRqkrKNVm3f/FKe6ADyQ9yTZyBq7nzFfoYNnzYWAgp7s="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.a9177836.0_1599846443861_0.293445387126136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.b102a3c8.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-circular-progress":"0.19.0-canary.b102a3c8.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Y7+uo69RJ4/rWZ1psF3+mRwWNc8f5c2eOUFzo9bqCYgOnm3EId4gumvI8kz2qrYJ3/n0jY5c5x0khmYtvjmpCA==","shasum":"83d372d778fafae6fa06cf9a0c11c4a232efae85","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.b102a3c8.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87aCRA9TVsSAnZWagAA+t0P/RxqxIxvN/c80fX585Gh\nh2Aq9kN54cRUXcGRvDwSC5uuNdqjSJPGHzQd419wDKJFxI3+GNXVX6TiiGcW\n5EOR1p3MM0vvgs9Al3KptKoADMCG/VHim6tZk9Kw71dpCdm4DTBGMeqAaa/m\nAWPjM2F0gbjPQczJiN0TqpkeQsx+QirKZ3hOV5Isn1oXFoiSq/s+GXVOR014\n1UXRGdrSbRR3NjOdZYuqnqlbFsOXMUS6/pyKJOIvxSvSnfjUf6tvRuSTp0U9\nYxA3Q8P1qQ2bsLqPAHfqiy4HyxeXWZYIXTpzk6nqjmH14dvkAzqbadV2UA5e\neefAYqubTJLYwGnWyCUH8xlK36bvTjzUnzRnuAnAuNMOEIdDsTL3TSiVCXZZ\nPbfB3ky1JkZYBWvM68M/D1AJ5wte2IhvSVA6adjbDwlVUjhvGOJPlCTj3bUU\nbtSDWzCVuIMxyY+40+X/YApHK1wqbkbweq59IhUvRo8eWhoJ4SnIv7mf60Bw\nnMY5APS+3Fs58bLES2eBqP/E7ql5eWim9Vz9NMeScXu1mnkPhVkeAOkLBCJk\n4ZOQCUYqWNZeHjSP196NfXiz+Io/ESWjO6t7Vxre/3l+Lqe26vBz/Sl5Nk2/\nDlpUnTUbdqENVLWlPk3oHs4j/i/eBGfCnbVrRXNTNXnGDGMSvnli3w0wpjtx\n6pcw\r\n=V0pe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWci8W3CfLMZY7p+7Eyw29gREI6AdQr8pL3Pu8xKBNvAIgf1JSRnJgJm8gTyxIylai+1b7cbLi8gCYkLJzGw4iqTE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.b102a3c8.0_1600114393852_0.9984082502585996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.a7fbc707.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-circular-progress":"0.19.0-canary.a7fbc707.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GGBgP88lfEOOiFYY2I91jkrxGmIqER0d1011j70co4s8VQCN8BMvoAjPjmrLdYkJdbqxCakfQcO0u8wCqbEJsQ==","shasum":"c78b64452a9c2f903885704d7424b09211390167","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.a7fbc707.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZHCRA9TVsSAnZWagAAe9gQAIVNTBH1Td7YKHeLs3jK\n3NG4NhnMAEXmUN8cs6XieHF+EdR80w7c9hTlD4hn07Egsjw8xBk0RYU7I3qB\np3k0nxVXknFW2jsJgu1Sdj45FxLSyqL8veHMOdAphOhlKVN1SQaAiq84drED\nY49b5y6oFu+DRgFUYLG2+z0DOYjJWartmUYbe2Wc14kpI7XbhIKAkkKOvYh0\nSBoAmTTsybsPApVFgXhfskiBG3qoSH7DDCyGZb8CHythEBE81/c+uzSa1m5l\nVv6CsbksWFTd4J70UrHOU6fFdHqyAcqNPBtRdqMoHYKL3AYhQVQtahTSNkce\nZORwAPvEWMXn+LMfN8kaAOHT9vcQ71v0DRw0Q5zJDsZFJ45nb265vw0j/lSW\n4b4l3EWXiwjwDywEq9MmmKiy0y+P1iOT4qNt1UU58GX+pgy0JOxiPMV5Z7ob\nKbSOmn5aeJMmQ+uROnrSvUdv7uXvGs3xOHY1j6eV902X5O5ZK5RwQnIpCKIe\nLvTeZ2JBZfJbCnD4p9MNbdltryfvxkrR0ysK6RhKGtWTkX25UUt8mCc97cO9\nd1dLDr8NSWQUG464U6K9kvsh+LPDyVyJ7wfket0l7COrMCcz+d1F3eryU7kw\nrvguT2jgUyjR+g9AXLEAhzjRco3YsBmTHpKT2/QJtXqpiGg8L8kxrNFPa3Cb\nXW8K\r\n=lYTt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcaAk5GEpTPj6ndRfIIFjAFSqbkO4VdnCmJoHQQE0LjQIgGuLWP0fIn31uK0FXVIyAxpQPC4aIsDAUIWjTuQMIJ4k="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.a7fbc707.0_1600185926944_0.8114690799672342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.ed6b8660.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-circular-progress":"0.19.0-canary.ed6b8660.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dQUXQusRrfqYs35WY6LISZ3XwxqMxgCP4M72ucHvxy1EnvptiIDQynzzPqEoxP4qB4mEYuioDhTAXQV3Mag6TQ==","shasum":"ff1abc4d7a53a727f030a595980adeefff24e4a4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.ed6b8660.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjeCRA9TVsSAnZWagAAH5EP/igFdzBCrL9Ah6/VBU8W\nNs5X0wb8gZNDPIfRFSWust9c5AB61hsbgMkWe7ksjwfr76LH6J6kXn71y97D\na97xlXFw5OBpO35twBDOYfJsMKPNdKbZF/wbRWu7kdnZKlRuTmu0xb9aIJu5\ngsJMqm8cFCr5qp1Q2TXKE7YQR0K2nzcZBzxisnEJugVhOXohjqom7Fd8YZdS\n1gHGWSVgGKWIxsTkNjLGj/Zotw2Omy3Aj5/Jr4whWfnPSuo/DcgmZcJst7qr\nN42cGFH7WpiOyy5YVT2i0yqyye7IjZvu5yxgatL7QD/2CZRumcVYbFBN2cCY\n664NpOq3F0OBR5SYEZhS78B3Zdo03PRa/ES+uhTMNSAC8Sak6l7e6rVn6dzo\nF9ybKba966goGL+wGDSu8VbVWEYDJBkOx7Hwf4h86h+JLPe2kSHJfWQCYLqS\nRg3Ng716zmMdtseDUWeVAzeALh7CdA/7HH0gU4BxEYYBbj+tfRFZtgXeLo8j\n93GB1WHjVGX0LVKiyqQooJJTkfLLgji7w12dTu2c2yoMFS2nDeLgfzj2IulQ\nsiTNK+CA8Q5WbdsnjLneMn6SiA/MXUdtmV0NfPWpJOJDyY17Hr+8WatKGGDq\nvMI38RGYt8UxSlw99Qxifrw/pMxgK6P0i0GB3Ld8SUVsO0zs5vjJ+2srUCIX\n4Lga\r\n=YXcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8q8+BmQJLXaUT85Xyfi+et+f6c07Ov5RzbMu8lBjGEgIgaJy9nwe8qWeTEhFUwULoxmjlXwLwSEOrpwOUbGEhJAI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.ed6b8660.0_1600190686337_0.8290412158322873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9c2331f5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-circular-progress":"0.19.0-canary.9c2331f5.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IU0tzPGvct8SltyUQo/DHTwb1Y/rs0tE8peMjlz4hEg2jmf2OUSfQ+SGEzK4L50j8tRzIIU6Mce8ylLK2Xj5kQ==","shasum":"d98ed4a419fab39e8e8da806c268cfaec0e76de4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9c2331f5.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6XCRA9TVsSAnZWagAAJwwP/2MiG/2K6qTSa9dUX8n3\nAgTtOtKDqTvNC0Fowce25kOC7EJsZ8nSJwypjvzDODJC3mcd7JsUTGczxbz8\nfJMxCFalk2Lxf1p/TXHa9ndGlPTtyuzWpmdEGOz0+8nhb5Ef/a4YA2PlfnV0\nwLb6KEXpBRFgVb2n6VIKCKdG8YCVwys6517XHHUKgFoeDhf8oH8R9GEmMOsC\nL2LiantxqyAagkrvPaP201vJrFvA3k3FQURQq7isJmHsnsql/+LCJSE7QK0T\nfoApug8G1Tek2/YoJM0MbH+btsgJHKmsEnbQIss6Y447M/9CzXP0i0m2PdXd\nF3MMxuZtavbG4P1t65J2oqxVsH8tU7q6erpToBJvgNpAA77mtcL1mEl6W+P8\nCLw5C7ob/A2eHlFb3qtAWin7Eex2SHoA0NAQV+qKacgFxojF+Jcxo2EkmzoR\npAotoiNmauphbjpfQU43h/8Vu6zgs5e3jywSktmP/rVtp+OGKjpR6SQ2/4W9\n45Nwes/Yy+6W+m+7dqIRtyddMWu8r/gaZTMDKoZYJQNJKtH3iPj1EEEs5Deb\nkz0A7Up1pLN/7d1M7merTFA1lC+4tmgQCuIdKUcfLOH8fofkAokUvGK3fKCi\nYIhRfiUeE5pH/EpWLa1qe5OkvQ2HPfhmOpYG5RZkZdyj6fI+nyQ51vKLXXS4\n5ZZu\r\n=KGBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYV2cZ4qzXFUBiUxOU7rJG2s9lyShnTu5RmIbsNJJJ3AiEA2ODmJ4uoucrXBw6qqTYPB/OKXf7zUsQUUWJrwoy0+os="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9c2331f5.0_1600192151316_0.8327553066358027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.63a5f088.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-circular-progress":"0.19.0-canary.63a5f088.0","@material/theme":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/mS5OELhknedSjOKwnrLP2QHTpfPaQRrSt7BlZ3hy4+q0Dc3Xk46qsxWkI1jdaVG0XDpz4WK/9naNmmqS0XGPA==","shasum":"92a4db412f6fe6c192ceb0d9e9e8d5c0d3667fa7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.63a5f088.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWtCRA9TVsSAnZWagAAeLEP/1IXSq4VyqZem7yIcBXq\nJB27LEsGmytAR1CC/oocAg9pwwRWdRVHSpFA30eibqztp4H7YU96BwjliwLx\no92BOCckG5Zh1qKRxP8jJf6/BGCYzawzVqGdgwL+fkeE2ldGcFrbCIfWMs+7\ncY7m7rpjhQQZhQDAPPVKLUkuQ3TLag+YzRlBvzX1IK39aRtcswZWQKskZyK5\nkCp3XkyU/CmvIAWS9pMNlCZPp81sVL+8B1RK4uvS45+46qApYJpqw1N+ytL8\nKJEj3n9F1aMsXysqgySFPfhhRwdIumMnVguizw9UGjWX4WJ5FmV0D2LaOjRY\nOMLQADc7IUwJjO8t499xXW8xHa8SBN/YahIJUayywmcOShTeHSrJAqRxcG3X\nQUYKlwG+3s4ht5VoI14Tftss5fPcoxs4n21MPMa6zlrdlhi9fJicu0FUE/G8\nHQKlXaCAYAydjona4uXr7P1O9+fsjY6BgpqCgn4WgPE8dFna3iKxuA5Q7TqJ\ndtGARgwPbsMIq4gYvZhQRJfGfw0U1kg3BFXGJEdtLv7UxhpkyuxQscAX9T7W\n9Ay3xcHKKpZczk+383+HCY3Z4fbU2gyHdtln6hoMRgQaP6D+Kk2m/dSsR+ja\nHIwkIu04iMf+756sBUuQBWqSQjHlFQcLEIVOIYj0x/jARNhTrrx53r/vbPW8\nX3IG\r\n=ozWL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL9iPRUD92l/xmG3Ge3AD+TjLvELtAMaJTlYzTWQbytAIhAKF2UnzZisvBc6YpvMCx3JDO7+svMDbtj4rHBgWRDFk0"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.63a5f088.0_1600292268662_0.9521494254505976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.b7995e49.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-circular-progress":"0.19.0-canary.b7995e49.0","@material/theme":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Z3+cifYscvoGezZEYvuq9WQSka1ys6uMjLlcXeWA1OR7tWi6hRCMgmfJZ2WWAOsLYOIciuKGP6mN7xkfuIBeTQ==","shasum":"5742e838aecac80bc555798436c05470a5b4b2ca","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.b7995e49.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8kCRA9TVsSAnZWagAAyOIP/1DEWL+R01XxDc1nHNRN\nEKLcjrFESYaxtY/AU0JFydRJ7ZXdyN2JyPAtRDTv4DsEyzsyhBZbzvhFgda9\n3GBVETwStSLhRiYfAgUH3n2XOIaHzco0HDvmzteuekaVuE1clLFeZkFkUHkb\nRw74I2li+Px+VCalA7r+JfVEVqbXoT908l1ufoWXlzTpwnnpQUx5Ojuy6pbN\n74479wd/GiTZv+ETIuXXK1rgx69BKOllfF+Q10ICZ3vqZkLUUpyg/Jsg++YI\n3RVu1AFhcseLnxi+pfP9O/F/Mftamyu6qyjr9mYF1FzwTGZXRsuzzRuHNu4A\nbksDs0ppXIQHwCk8MOPcX3UniyoN8nYHTvK7UBLJ5cCdql4nrNYW2sc1yuno\nvSyu91URnKdu3io0Vpz5xWRc23y6ON7Pqhna7mdqzLbBycRc+76jm0g/AAai\nssiTn7NuGGWFCHMSytJaqty0729rzmv6MVHI8XtDgrvd5neMTc9KvoizbJSj\n0mhZ4VzkD7+jl5bUwXh5l+X9pbofw9FoiP6iAZEpBW6iHOHIgjpgiX7Vr6Ly\nvcDng3vpfA/+GW8OIQ6V9PfiZRRAHQ7EoW7SD/oGse8URRASUGpF3/jBNCC2\nlwvTh3wRhziEFZZhV6UpsdLfxwXhyWcNzw8PSjUJHkrkK8hxErd4KpDc8whs\npD/L\r\n=RlOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwyvJQ66OMJ+Dot3bxtCVwTzJz5+M5fn7dnXb/zn3P0gIgVseNhymeqLZe2UCfO8pye7IlYDuv9BZZ2+czmvufWWQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.b7995e49.0_1600298787798_0.5692681392800925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.0da3ec97.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-circular-progress":"0.19.0-canary.0da3ec97.0","@material/theme":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eBbM6g/OZR+vVefbtImgb64Aj6BrdQ5gx7cL2STD5YyhV6KkCU/k6hT9fQnGm5OAkSt3DzFypr8OqussINjClA==","shasum":"1c99dd1abe58a019adb3612f4d016a8e31e0964d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.0da3ec97.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRiCRA9TVsSAnZWagAAYKgP/AtKX286DpNqcLlcWWAN\ntbgDZ8ebWcekQTaCoLFDQ/SW0UProqrnmXjxClvqTmOfIP/icDCb1KOrodNu\nDl69v9tnnCWRC0r7cOe5Bub8yg7H5OK/4p5I4xzDzDaGQxUOGi0movK+hJp1\nLf8rawun6Es4SpH7LzjNkIrir65k63LIDHlk2lBNLPjeD7CITZMrTzqWShvg\nntZlLj3qfQ2KNaAcm6BS7BTs8Zpn0ra13dODEIh7jXRRwFTAfGxV5CO/KtrN\n0f26oIONkfuc/w2b6gePpTMHegd6iEqV6RJynOgy/v55zimXXwMsXrGBbpUN\ny1G/Jy6eEn/8r3m7EMlEEofL9HeyBNEvhAnUzsqmn8PDwj+ZhPcjAEVryZCL\nzMxUbj87WVrRmfqE1rkqmxk4U/f73QNgX0UFS8T6fRUyxhUg5erKjA5VNpgi\ntpLqZcl59vD22WDKrVbp+H4kOW6FM2bvA21gNyAAjx8MaQ6HFus2r/YDaE3A\nUEBcE0JWmV7RU0CXsET1tE10SZ0iBqqmPus5J8dtyUvVZXhKAnDJLD5H/CwK\nLVPNp30wmJQBHkdX8TGJ15RIJdE/rq9c5jJSjNjSlJ90BJ6FcFyY0nSKdN71\nVrgi6JNGParEPf+jWKfIQ8dv+qWyN6i36WALxlv1TZ1aOvg+KnhvWx/kzstl\nWctM\r\n=ZxJ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMtbkule+sAQwSFwaR2Wp5rhKDjXqZ4rqjVDv0ZGcywgIgbWyOS6WJZyJgMRs+DDodJFMmxYjv6XIlmqxAlNtV22w="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.0da3ec97.0_1600726113776_0.01687024536031778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.a0793c96.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-circular-progress":"0.19.0-canary.a0793c96.0","@material/theme":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qJzwgHQc1jwBv0oA8A2H546Vr8ASrw3UiYB9PSsyisKm3GiPut11MXO+Ww5LGPkMmAEeQq1Ij+d2H5FqMX/pHQ==","shasum":"25c9e97fe72dd2860f5a7d97625efb30ddbb0d3f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.a0793c96.0.tgz","fileCount":16,"unpackedSize":41477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6aCRA9TVsSAnZWagAA5WQP/RDh/eOJ0fCYIABLWgM1\nCuprZHuJn6701Pd8oxtatj1cqk8zezSX1C3XgbsZZ89P+6Tz3a0QM0DWd7RJ\nel/CZo7QBmsn163b92WnlGgJ7M3T4rvXlscd4gexsrnnjTTucMv3hNqgfYVG\nQbXO0S1aZZ/hchUhyZyHd5BSf+BR6eLAQ925LfA4Zq47DUEkZwS7/7qFbkvb\nFC0tOLZiHQVaDzwACgiJ2F1xac980FvS0n1DtTpNPHo6YqNW3o55/07url6M\njUVh9YeQuXyohW/dU6a2862yfeBg7DRlHcj5zD0WyJswEherKCw7ppWvy8Sn\nTLHb+2EPUBSoxffhsSPyTKyo8KLS73+mNXXnQD40VAcC1mBNTLc4W+mMfPrW\nfg/19V+jpMYTftUVGZIhfL71w3d1T0aXhIYah2rIzC7AeYUDT+76QrY4pgie\nNi3yAkwZBUEecPmpdS9erbkbCIYYDEg+RTTwCcZ6vachqVpgfE2exa4BBxsh\n5i6DefXGwcLIQL2oTSIYHXYNaPzVHqDybVJw7ROan2J6dGcrQMCkiflAs6nX\nhxPNCZr7tht/SWWK8R8s55/8RF38TAd3pC31JzuSgfFH/50KZYsi5fpGG1oo\n7+0LsbVcpfU38JThZCZdfLfL3lo2ibiktKGimahON4bJXFcRHjg4eQVnUCy7\ns5Dl\r\n=WyVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnyiNS/Ixx0LTubbuRCI3PhlL5JRemrMZc+T5lfltIBAiEA/lzx7y1OaB4YpH0k7kVPaXX2cQCqr12K4KE4Yz70h4g="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.a0793c96.0_1600794265764_0.5845571481397447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.06998a3e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-circular-progress":"0.19.0-canary.06998a3e.0","@material/theme":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3BBi/2Qw+1TDVFWNRPzoU/7PdD50675QbPLJ+yhavFfTdt9tiREzRz3SUshbDf3crNRTZQ2p/ZJyTCoRIkBK9A==","shasum":"e30347911ce4eabb6c4c5f83b56ab1bd6f91caa4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.06998a3e.0.tgz","fileCount":16,"unpackedSize":42051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGjCRA9TVsSAnZWagAAq/cP/25F8RuuX0fJJh1KlRCL\nHkSH342Vyn5ryesJG0J4hC2TV4nxKNLqQxnk4YLWXPJeD/h2emC7dc8O7mLy\nV+EkM6VvFLk/ZgNgcaZ2SZKU+xa4s2+aYimhSdybRzG3WK0ee0t6YsuEXniy\nysZqgotDyAGHeZuBhztir+2gSnxkPi1AElStdwNvGdMp8cU4kWpyCKUcD6PT\ncRXqe+7n+MvA2VnNl4mfFq8KN6XHB3L+JASm8ot2G8woUIZdOjYjBdTrAKgo\nv3TA3/X1OO0UTYnj6e50iejrFZ9ECJp+Fj53n38J9fuLnKqjhqWoZ42krR4F\nZwQle/1m8zRp157minV2mGQdcynmq31BTT9F3eF5vWZ7stgRpN4iXphcclc2\nGhlH8M5TVPVxyApKy8xBjpWrN4hrODy0obK96m9JC2hGDkKE/e+OC+D+tUTs\n4hLIMgWnSLLVlXHx9wvhaoS+iXJBwDr2mttchKG8pIDVO1rIXV04P4J0pMBD\n+Vxzed57pXPqPHutreZimBecTZ0hpnvc7zGXQD/a0ogiPBnU4xJTBpGqHKRd\ntgXeNrP4/TaEdf+8T12Z9vN/I5yKwSj40z6GpjsNvxjMFibmfJ4kHVMB8fT1\nxn155PSYCUsAVzLREdhXveDOqakhPrBOIkuHWw0HcCEJPdcKxtq/ICysZQ/F\nd2SW\r\n=sgfM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjZSKmSHLKlkLzAv179oVJ73keW3W3uvnNODM0eA2FUAiEApRHmleYZ2Lw4enKGpV6yV8PmZ1ZuRPHo58qiUq98ewc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.06998a3e.0_1600799138622_0.9474048653966456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.3484a90d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-circular-progress":"0.19.0-canary.3484a90d.0","@material/theme":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NPX8+0JLOqgXTf2AJ0oJVSsOzhPDWJhtx1dX6ZmwV4E6STOfrnIB2dxd40vXKXzXVDkE3Bg4ec69AfWC7u9igg==","shasum":"7e551dd331ffcfab7210bdbeae636f5f9653ba2e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.3484a90d.0.tgz","fileCount":16,"unpackedSize":42051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTTCRA9TVsSAnZWagAA7RsP/3JjP9FHkF0d+pLLjzbP\nubtpcRmtnOKZELesepzTvhu5mD14ax8YHBb2LgcDzldhbcGSFCg+YWQL+qIX\nfaouuXVfM5sYOeWr3DMYWEOVgbbVsQqZd3s8qZvcX1eRL1lBA87Sklehgd75\nZITWSRWXiPCWyXh2azd+4Hte9LWCogWtjasBlO24ZpQP44QX6f6Nq4fVPPm+\ndhG2FL9yYW7Az67njlYp+Law1AEvdVZLhUbozpNKm4WraAnTaRXCnxTV5OOu\ntOQwEapMyBzIibyZAeGRX7i5CeBPNPkiUJ1/eKbOcsDNfBOkpMyoryMDwBl2\n5ex6xznI0w8nBWEQqywPhQLMwUpoRyd6aAAUTHsg5RXDThmiaSTtd8cHoP5d\niDjTxmAwP4IkyxLR+hIGOBI/2Q1RZfwQuClkCJn+T9D+UaYn3b76dx9Wp+CK\n2+sBKEM835TZUFdRtfKNTR63JZ+QfdFwRJ5vL2h7vliikmHYK8v+bl5QIsfk\ndGr5XGoP9dURTYq4BTA1M4Vsr/WPOL+Q9lrlsvhknLYhW3YmBJ9JBG94uZ4h\ngeUQaYIaTPisPCPWZwK1qRE686QzjfEjtMEzsXuU8lakpmfYLX4FTpdZv5cw\nebHhf6a07Fb3XHtUp5St0IEU1ZsOEwvtj4tkUkzyz/Jx085Zv3SbSJqbynBL\nJZda\r\n=Ohqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/itqCVqkyaHyo7Wlaqwbq7lrm46GwT7SHoftEwLfIPAiBzh3coNjF/WMfMwEoFnW88CBTe1Ggm+6TBOMVnWh+K0Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.3484a90d.0_1600812243094_0.05017214142512061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.3f99af40.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-circular-progress":"0.19.0-canary.3f99af40.0","@material/theme":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-N5No4SJw+CcuSB4F09aOGyF3dSzQfqL+zUcjCYdlsxzW73yk+puTKAQc/WA2kX2KkjWYIlgsoueTRtj+39PaHA==","shasum":"4bb5b7e16b9bf88e6ae56b5d30e6cbf55dafa0f5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.3f99af40.0.tgz","fileCount":16,"unpackedSize":42051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSnuCRA9TVsSAnZWagAA2MoQAIlkBouUI+zjFRK3Pwin\nSU2lkD/3UfruDJHKLkg6DcsTK11Jh+fqAqYp8av5C1kSquZr64jk40/o8OFB\nwRSf8DtJK+ZjCXOJlc1uYcV0/oicLeM1g0lssLsmqhrTLDUGu3al3AFB4SfN\n6cC1c1v9iqR2uYb9xAqL6zZ+s+7+fe5Ng9w/bY9wStnS+Nlloop/VKkMMfRe\ngjsJ2NzqSPuyCICdIJHqAtbmJkoAKoZ4w9I1WgRTvopou2z9UvNpPiGn+eAe\n2FT1OqiBr67ickLLQwLZOg8DI1JZm8Q8p8g/nU1Lib3tpfZQVcmQuQHMN3gz\n5/v9u28yT6R+ws2+ZjGd2vMdTVdN9ZumRYq52+0iWDkCv9+sp5dMwCoIl3g+\n0LRDXTyneTZjLjGkGjuaikIPw37R8irUqJIPkCCR/tL8E0PhgXekot0UFE+T\nSxn4XypGfTX4IT5X2hZEQhqBcdu3/njH3Gzzp/ixhXq04tmQRXm5vS5LadL3\nCFQPsb0EMTzfkonCaC9IWbQyTsadDpoYx58p0RBwWQlS6Z034zYnf7HyLquX\nUuYq40D9J04AyxMF9b0u4wg7DjMulHq3X6A/oJk6cdrvAt3HyuOE/xcLQcQZ\n241mUN9XxqRMo6/kiCax4dABfQW93F0mSq9KIBqmu2RriQD6zIpIrj46gXkd\nC5GX\r\n=6yBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFCQcZfgf31Ol7VoWY6t/QX8ksFl8/VEpCzmdJEg7s/AiEAqnv2wEAjyOI+OlDLtbPGSj184AKcFbfFQJzCld125LU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.3f99af40.0_1600989678116_0.6201203854445889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.72aa1129.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-circular-progress":"0.19.0-canary.72aa1129.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-kFOuPlIskeulmHoyTOMxYQtrY00anu0OdfHU2Dh3kZRX53ztscscntBzF1lOb7LB4mjUbeBZ/fkbO+NTZaAQiQ==","shasum":"58260ae3aba49ca46771b2a862443eaea0b236e0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.72aa1129.0.tgz","fileCount":16,"unpackedSize":42051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwDCRA9TVsSAnZWagAA23QQAI/xe9VwC1khGUAbLAd/\np//clkSSpF8i6kCuKHcEvJafxElq4PMot9OqXwl1GMtfIto3dmXnXJce5IBg\nCcd+Tun4kdi6WzJUBHe/RbOj5uCNJQs4lnPwD0gnlUG7UiyLnAsZ/UF2VBwH\nwp/fF2CgcR41rzS4Vax+GdIr4ywNaGW9lJ4jC6EEE+wREbjNVeNZrrEbVdC9\njzAO+Hiyhl+Qltd6rVihYL7tZNz0HYf7hUKkS5/nWyTBYaVnv1mt+QwQSn59\nOXbDXKwOt0HvN0fJ9tlH9oy/3y/QUdrJBydwnYEPGrJ47WhEIOdxsZbrGykl\nBkNqjIyoHueNTLmbqRfJVuJeZcPXQ4E5gDsibzS+WZvR0xSQdzFjhz8b7jTZ\nYsetNT9rcy+demB7jbmsAiINFIuYtpglE8lrV2+Vv8h9uaZpCj1I96tasGk4\n+7EtkYnJnDjst9BHME14RfHfzzxzdhswPM/VnVKw6jYNeIzJTVqpC2RZC6rm\nIUr89TMuyp+LpRmd6DPlsAwRf/ZTd9enlwSPTS/isTWKbN1DwNMNrEC3oCgf\nWPNnVbm+uktpF/KdSc8mHMINpFALYlRhrRq4l57Pe+P0dFdF9u2k229uumgJ\n6ys5sxOrFonNIFavxxTmtdCQ7a2z50E//jJAXsCd2X/LqzlQnnwPf1N6gL3C\nTvqj\r\n=Vp6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGUD/tqeqO5dO9segnhN38uSSHIxttYWodsMV4wvd2xgIgSkt6X7Q7L1cQ01pN7NWqMMbFi16XUNRvzLSrgmo6wV8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.72aa1129.0_1601068035328_0.1330103268683951"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.394fd3f6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-circular-progress":"0.19.0-canary.394fd3f6.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Wl6Bk6aERAqpdEY++FnwOF+nfQJxzpFTAS/y7cFd2FmBb+N15XnNbSXsMKinQmOAl6TXwG/KdfJxJIwPHK5AnQ==","shasum":"cdede9a28149bddbe7f6a2a83b205a50ef1a9084","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.394fd3f6.0.tgz","fileCount":16,"unpackedSize":42051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9GCRA9TVsSAnZWagAARIgP/3ywsrErHTp6FQUXTb8z\nkPIincUfYuthVzp5YzY1+5JPQqh9pgT37g28uw+A+TD8LO8eoE7X+guJtOoS\ncMUYzjU/AT60qG9t70EJdW5E90aCklmNYCszyx189p/XrZYjUeu4sWsPbQUz\npauYFUMNHNTZvsT1dIeCrUivK2lYPPWseA29f06+COWE0/CW3YEJhvbUIuS6\neOrnuRhr6SEZUmvCBS/pqE1ifGuemHLKdU8tld11aRfL6dBlFtkfdlLf9mfP\neGn48MxGbvvre68QPGaPu2wZntYRc2+PIP6pIdxkbfKU6Ks+IdH+Gx4ocyv6\nX56nhCB0kbZuD1CU3QrjVk3aLGG0uRS/o2CgC6DTQlKr48HG3UYVk+Ie6Zd1\nkARInNAVWzmbONjI/SQAF3PZnRyh7OKQbl02Q4FJota8oQLXPg2tlQJauDa4\n2f1E8R7B9YuBHHk8CuVHogiAw41Dml5+8UfI8S1ISYbECTlpyxVgadFtRVM9\n07FkPYJhRyHqinsHz6EJ2pirWCjiGcZmNn2GwBmegqS5p+3aHSZmF1kefcrV\nrU40xeFlWyWVIR8uIFX5wtS4cKdh0mEt0exQ7ELU7PhdJ20I4gR90FkgB27U\nvvC9sE+bq7jOTAppyO389QCVQOkQ6EroFYCOK3HZhH4YUZ7hsISR88rGDdSd\nm/kD\r\n=Rxr7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcwpK4zxWr6Mk538eTsKiB3mtUyJW1JCEUwFZsc+zGegIhAKKSPljMMYPstAstgahjCVgCJW39Lyx4RcEisKxE/LTB"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.394fd3f6.0_1601302342125_0.1708171656055697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.347110f1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-circular-progress":"0.19.0-canary.347110f1.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-0wx4isMVpsQlIV6tFACJoL6IC2RCNgkd4FXDhtm973QBLS/CfPVey8XoTOfpEb8Bd8pP/ulu9AlDcoXF8GfAgg==","shasum":"bf82d3cbae08377958a4fa78e1c894be355d0f5c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.347110f1.0.tgz","fileCount":16,"unpackedSize":42755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRNCRA9TVsSAnZWagAAYlMP/3/P0ojFIfBD3lEBs7lq\npwTW38SggB+OckEkgmRSd4VIlV8FTN1cpuDexvvyqsRZxDVHClxH5Oj1v2RX\nqNljLzYBh9ZsO96koX1z++hycxPPA9/Zj4ttY1eO8tr281z9oijXQio9SRrz\nBPBie6K7p6j8iZRbvq4ueqw3HjMmKMvuK3n7yWaUgjz2lAZH1STqc1P0k234\nOm9NOTuY+nJv5xKg/+oDr4+e30PNUZfR0WzZ+cJ/lLNQByoBxu7mAIPGxxMb\nLEwggWnob9wjiz0llFY50nCSphyh4u9N/LX6VQO08T3hmGIPvNEpYL2A+Ui/\n7YW/BG+IOFxpceuXVRxZQdRkhFopcJrdi1wX0rLD1YbQCZi5V0iHvCKQABDB\nLAeKsVXSzDT1OY03z2uIldhBVyyjxSd2NbKA6qNnyB16KqDrLExGtAo+yOk5\nkUq0Q4lT+GFfOzC0nl6U0J5t4j0/CtSAztLR/lSiJWnWmX9grUMs1AqkV8zB\nikkGLocuJYVLRf/hhyPf0XWxSxJAqV3MXb4eifo1A16ojhFBrPnutsA2Dfvi\nmdiwDc5zPU0FpWYtdNfZ5YHFH3qwB7rsGmYXOA8rLPqWAM/0tOuW49hnKOr8\nfuQiB+SpiKHb9gCVLxSs+aWfZZc1RrLCMX4GcJnHvzQfsG/mhxj1PEuoP2kG\nppi6\r\n=H51m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+6PgXvsvY9CZ/zPmsWLtKjhMjHgecI+aV+oL9Po9c2QIgJn/OB8Q7cjthnF62o2mWBuYTgRnRvvPgWalBWrrnQoE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.347110f1.0_1601311821351_0.5817557345579354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.5e330bb9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-circular-progress":"0.19.0-canary.5e330bb9.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-d7o3TZxJHftTFQGAvyzhLbJ7KuGmwkqFkuJgqxEZkuPA6Fenr9D+h82WnvJ//zBu85c5pqIgSvPqHki8cKqdjg==","shasum":"37424b75046114c1f50bd5459f8c9fe88efe267c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.5e330bb9.0.tgz","fileCount":16,"unpackedSize":42755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAmCRA9TVsSAnZWagAABDkP/18rePuENr5awgmKcOq9\nrTuowaOh/KcNLJNW9lglePptmZrYtCcE/upoFV0UXQukOjfXlQgsP7JbeGbB\nDmon5CarJiFIx3lxkhiLJ2Ri07WMa/kw2+IJ0ApJHBYkSOEyGEex08bCIQj7\nkhnfZWnsWL9VNU7XqZ5Aldrp3e6OGbap8ZydmxEtFo3oVP0MeXrUUb8Jy7u4\n9WhtgI9rsLPKnx0v/aUxTcTQlWgMTKuMzTQWfbbCFVz1K76x5JueeDvnEapM\nqBcwGETwvETUk2PmJGJtNxqI2j0rmE5tIgX7soLzQ1HpTJdXJh+fn3L+XWFu\nN2i20fNV9qLvRCCjtaPRVEPj5BHJXc4vPn3eaOXQhqs3IasGeFyQol7EapXJ\nSxRga5enB847zyQouES/5GBSFL7pgXExtxuqwo63fglyPN5WGbjepCpAsei9\nI+0EpYsKkSlyIAp+72VGD54VPWLGpTEooKXGDkrL9ZBI8Tr/e3Y5foidrFgV\nPSTTbAcRqt58EowgAhs4T/uQZZwYi2lMDM7B+/l6JK47wc8fEo4wHAN1IIat\nq01WdY3YNwNUAK/PZc6sb4hFCfxfX3h5ScBX3Z7ybmrGkqoJ4NBQNvzqelJ3\nXgu6/FOZUeYQ+v3uzPcRUZw9tviCUmfOq2ySvssDD0F0MpB6qIJEtmiaRKA9\n9Nkp\r\n=UZ4x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6No/5OCNOzp8x5/YO1olpxOUsus6DTWw3Mss497N04QIgE3Gp69kxY5GDCiXXk3FZVrVFtLt9ER2m8/9QViICSOI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.5e330bb9.0_1601503270150_0.8310887207918971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-circular-progress":"0.19.0-canary.30b9e3a9.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LqkSY85XDhRUyRatpBaZluW9symMalpW8mo8hhOJqWMH64YkGyhHr+1mgainqTtdq00L3nfBXSpXXfDdeEHx6g==","shasum":"45e7808dd817e95796a7a941ab2217b57ecc1a79","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.30b9e3a9.0.tgz","fileCount":16,"unpackedSize":42755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjNCRA9TVsSAnZWagAA9CEQAKHDePjQliYlVt58JqnL\n+GNEp906gG+ld9nhipFiKBDjbKrfo4CAAzxIYm0s5rV5gbkirG639v9ZPAis\neZVUe11cOhAt9QAcz/rCD1JpBSNInQoASBSSeQF74g+8Chtjo21jqi8eFjrr\n9HPJVo4iYys4TtegY2BUUi2sB2guFyuVx9KriUq+q8YA26KbKMH29A1lijBd\nt8dxf+vwyikXXj2qwEq3QqKqTZCLBVUh5Quu/QtDwsIkkyyxW1NShiAiEPmr\nq4mcQBM9SybUwDz9cm1hh4WXs/qL1hS+yItibDjbJe2C/2mddyHUzv0jSAO/\nuhcr3sKsBPGFuj4PPjIB/nEtCjbuf2hq/5pR1x3zw6e8vJyAsK3OECooj6bV\n2Bln4FsKmG4ZTBE4z3P8w1WCVEsRmirY+2RticVQ5Fsy3qoFHL3Z2FkXeQPs\n43/oqPXmTpRM5uVTXNcNoN174QD3O/3JZQBAAoHkMN88+9hWT/rPZVIwiicR\nl1/V2l65QDrllkM9NKqlGy3JMouST6vIH8/hvQO4PCTV1JNdhrWphZ/N2m1Z\nFBqvRx6p9PKYFW0p+mAjkTBs9WAiQRfdzTLcCNr60Xoy++Zb2F3alGYV/MUF\nzZ2thfuzCa5/Njpsw0b9IUpeMflzSWPrr6MjlYG68WlN9UT65urF05N0A2la\n55iw\r\n=e8Mt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXmCotMnntqqssrprEUqyr6IXxYoE5WbMZj48q3IKNXAiEAn5DNwlF6uA6hmLwB4WGiA3vLULx0+d4SJJ8AFmPGtqk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.30b9e3a9.0_1601505485136_0.8122937444508389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-circular-progress":"0.19.0-canary.7bb04b9a.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YOgslDzSNOCSoKWsB0ANMZI2VkPtsQo1bWO8xVaDNe+ZEWUk8FTnPeWLNjOUBGl0nyZcz+Spv3DHflpxtaY+ow==","shasum":"2de813d664eadccd8296d2334cef9e840cc4a583","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.7bb04b9a.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTECRA9TVsSAnZWagAA8ecP/1l6rc31ZZNEWXD9XfIX\nZ2Nvb4ko8yVib/Kib1EOlr3ZKDi+3FZL+oc5wUci4C1CRy6c392cHTRRdzZS\nKIdg+miXA+Ml65vp8ImdI22Si3/XyTN0jIgDuzi113PpcbOdiNpClZFQI8+Z\nEKv+Y9Ay70KyaWGOLjoacsKnzN7Y64ZxyZB77GSQL7m5E6QWYPBqpdjKdOYu\nWSMXA9wuly61Ezq2yZpMXBEmCWIcvMOXKmVFF1ycv8IcBWcID+pNwTv5VWa9\nWyVzRip8U++45/3lEdq6oZVTVeq/MhgoXfVwK0s093ANENiMJAFm2exg85R5\nt0qrHLH9JB0Nze+zmNOHRwgWL4Xc8NOn+BT1Y17ZNMsSWon+MsNLB0WjofzW\nZFOgwzUPmXiIXeWX9ybZZwdGTM1w4+bwEKohJJdqJ+T2NMBxWhy4+HDdctBy\nYH7Rdz3HqWc/B9TGoTiN2TL360VuOD611PjBo/V9HGS8HsFlQhZbyGkprYNK\nUoaXB5N1gBrLozVbnWoWjSHWesMYZ3sQlexNl+I5pmLanetCpHNaCD1LZM6V\ns2ShSOnq+e+rFkT+PRBCQ+Zlpz/n8lvJAhWLBnuWcXkaY/J68pIYVnpL4llI\nVZmI6Ps59WNmP37+AEIVLcc1mxhAhsBoiuyFc2Q0owiDD17Jk0e66VDWBYgL\njtHi\r\n=dNY5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAkNmPn7UDClVWrqca2+f3kL0m8KOsf5ibagvN9df7oAIhALGp9VMDq/jD7rSDu4wn52dUFwoyTvWPW06jK/CSPBpV"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.7bb04b9a.0_1601594563847_0.31007009511093586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.615d861d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-circular-progress":"0.19.0-canary.615d861d.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Y6agB/NV/N1ZTH+1yxTcR1LnPgsxjkvi9A5yjMcJgznmVXlZ4pZ1hlEgFGaU8isIME4d/2sKxoJNAxG/Iz9abQ==","shasum":"c49d15c4132b1a52a6c6b9782bc84fbc036f0259","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.615d861d.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNgCRA9TVsSAnZWagAAA3YQAJPqXI83CtB+L7eLgG08\njj17PROUDZxmYP/+xIuUUD6RmJBvulCzSXIfY4oXuwAFlys2ynA2VJPBU/SH\nt91FVVEh5y5Kp4tiH/QEOaTvLZWMGZTL8zLzoWogQjgnrCWNibLRLNng9dst\n9iIiDfWzeAurMQuOM3QWcPf4xRtEBFTkKQZX9u4A7Ffj0mZcKBbvjvP+Km0C\nTmqM3z2QXwuAMtRHA5TF9JYc9hQ3JnNgnCAgh1J/4Ic97UqaCcrux1v6pP6X\nRMBGr2mTmJEPxQbG2AHquYyzI8H+/JRxsR9WCHsqkqE9PydvZj23NFw+H3R+\nBKIjKXGVheyOjGQeLcToGU2iV5AtnnJcbZzzBVxpWXADbAMM93ezRu/Rg7LV\nwLjjBbpLBloH20YjAaOMQWaUuZRIsPk8k/DKxSQfN2TmHUZo6uoBqz5DexH2\nFlFkjr60Za6tYCbTFFqwJZe5GHcPcnkPlFFf4IGytz9WFjK5GoMbTAtCEyD5\n7DUHZkXnd7MKij/YuPJ+rkS52ABnYP8DxgLkIP7H8qe0ERP2X9BDuvfMKie5\n09zILlmsbhr4QwjdAvNCmLHVSodM7/6o5pl+1DPcMDJ2K9l8zDlwmZiSMFNf\nJ5rNayHMt3pYPFMOnB0+z981fr+M2HGk94Qx9kiw+J5nqRJ8HcftO9b/gG+t\nMYYa\r\n=/1OR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR9SVAixCwG2i0Rf3nfBuK10aeKF1NhoHfpD0Waw5OHQIhAPNBZF2KV0+3QXC+TVJnNYhZyjT7VjSCtRmrG5VLK3eo"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.615d861d.0_1601602400331_0.9776397465425963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.af110e86.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-circular-progress":"0.19.0-canary.af110e86.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LnJ6pQRedGxrKByx7ni3g8EHsE/zO6wNJ/KlHLB8fWYWarbUoUd7qFpK7EJB2yjdoW46sYtFuDwybG0Hvs0KMg==","shasum":"79cbbec5f801260b5a9d533d4db41886bf84a915","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.af110e86.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7ydCRA9TVsSAnZWagAA6QkP/35POopZ+b0a4M9pT50T\n/QFpUzE/rCrSmC585OifdMjXlFFKDVsvNzUmgU8fGtwVUOE5thKHRrAXaHZ/\nGbJsO8KtzHcQg/rtOH7XiZQyHR8WrWEFnoJmLJgsGGu8+DqeYOSV3l3QrZmU\nBIRoMr0Hai99GWGbz/seywkwDcRGfOtS10/d2SDVH1thSbWkTAwGC0kpAWPh\nOQGgg4x8Hm74jd0ePYD9ptphsi9is2USHsTEHi17kglOTPU3kwdCK1gHo/RE\nq/J33MNpxR5C+V6opN93JCuuKlpuVuTE3ruzdCtQZpQtMS/9hDP5jLHoSe0X\n0RvIa8wqwtj2SQ80TWGwWss/YsSV9kXL5V3PZjQQ9P6XgJDapGHkDruJKLs/\nqNVR6WqQVpkiZcXjz/55fDssFBCCgBrSMIgxvHPXzyn6DrcNIZm7CDYoxiX4\n+4wdBQW2xZd/UoJSSsAQ3evZGrKYuJ+6HvCHBSomkVa8ncuULCsXHiHfNucl\nHm13m9pnsmrIr3vft6PTCKp1ytGkAdFnL2mYOqx6euGpEChbODPbet214HSw\nwkg3TOVUoavOmsp3Ff6D9T57S5aT1t4xUga/ULX2VRBZcgpriY6iiRM9K2Mp\nP4M76+zfMExQ3YWCmqwOyrhnRYCWEG9BiDs5xFC7MDaorDCNWQUBSCkYJ8pF\nCb4+\r\n=UgUD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQwo62WvvvZ/DPDdpf/jNhHyLpu1s6+sq2KZ1dP0PuIgIgBqKLjvjLVmGMd7FiXHicbeKU3EPOG43pG0yxBqdBva0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.af110e86.0_1601682589405_0.2158872359640187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.89d27ca5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-circular-progress":"0.19.0-canary.89d27ca5.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-36Xq5aHc9L4KMB2h8310eXrc5ekb5usyWCwhBDH4McJM+JI/tCbpMJzdloul1tQmgaMkZKEW2WThbkt2LpYQOA==","shasum":"74af4954db50cc3b1929447a8b34d9fc22d73371","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.89d27ca5.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fnCRA9TVsSAnZWagAAcHEP/3HRGR3dxrOAA/b14RZU\n0nT+kdI6f0pJJVbpTenMzL+9OTC4MJEgp9ptiqt1PpP3yj9Ek7BScnzxLijq\nEllU+/ZitEQVSa3DrVCHlrk5PQQyLO+ki3eFRGM7eUxLLsmknuxYdZyQTO1g\nEmvvf2gNmeGpJ0Hma+OLa1h34/c5zycFjF+MX76YwNP5ZnSouHw3LiHS75nQ\n93NbGWu7VKwWIa1ovMV3m6AT2sEwF+0pwBBqWYaKQGiLw9ew7U2DGnwq0Ku/\nttblzkM+eN8PbJ3EQNirLPowjjEHITbRtmcNotUiLRb82qnha30LF4CWNCzU\nlU3fvX/7Lbo7ybwLM2mAfV4pYPTvxB66jEcAQVzw6GF2AQMRDJR2yrYzfrFd\nGh9Zw4/Oc14dfSBMt/Gnqncm5+uDJkKzZR1hRYWCvgzpZucR3cDRL6baIWqJ\nEPQuZU7Vi07iCbpV78eMVQEBQiG4R28KZO3AFFD/FxYpghJ8zo31JFUjh1+A\n6c9VKXarCDN7LQLPzQsJ2NQQteqO3P555GIqm1ttrt6XLLcUFGRDGON/PhqH\ndNXsOe0vBnsjb/jyXFrHl4nyAey8OMkDGdmJAYk38dbhjnBPO7v0eFX4hmWY\nt1YLr+FJX4OK2Zq+t68aBvMJQvekt74BwjZKx56aFd5yWjR1llO6TCdEL3Bi\nIJZZ\r\n=gt0c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxLy2mWpdCEyIna6ELM1aPC6+VTfAcZcJl1lgNWH9BGAiEAuIKKwVjPEz1BViC4fXDM5InyvhHiE0ZePrCR8wS5IW0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.89d27ca5.0_1601947622898_0.4225215776077438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-circular-progress":"0.19.0-canary.9ef2e7c2.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-sg2HRc9nq4hDtBMjFe0b6HoqWtr/F+RNTxvgTOxtyRnw3JyG8BecWa9tMxvJvQgBYnLPI+HXVY+5LGfl31xkRA==","shasum":"941d2e641e5034c9c8bc203c8c5f59876b2c8603","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhbCRA9TVsSAnZWagAAWWUP/0fZJpT94JaVcotInD6T\n57pNLcv7YcFXzNEb/AfhMRHuAbDEJPed+fKpC6WXppE5CTRGr4ZqRXKX1bs7\nn7JE9rS9YvurD4xKqAECjH80gaOKT33ikBkCx3l725MNDoKBij0rkXSj7R7B\nvVky6YW3l13Umv2bb+ebSKgqeqsCMszcQ9SxbBqAuGS08TE+TvYW9wi1pPF6\ngA/9RzaiaR7YTp+uad6h6dNOmaBOXU09E+1U2ZaFZ3bohyAQAi9iPATFqqmN\ne1mFBv/CyruFTi5Jg1lBXfCjE5SfTv1UwMmxNnlsJi9/QrzY7hvzyp8KfOU1\n9XPQHaXnyU4lWWNvD1oNrar3vltPtDhxsgs6CGKEEVFuUQUmkz+m5N0CQZO+\nh/HXaES3qTHAybceVa9Tu62vdxkmx3WJqfnsXgnGndl19F0nL3jytLbSzO66\nIC6nqmYNXT6FLnB9W5iKpu4zcem/iWf375AkOPXkR5MSXxO9o/00EGtPJ/f5\nZ3AXnlC055gy0cndI7jpWbF1bP8xtcL40a4fKE3Q29DdK6Q1Naa6Y09MtL6T\n+zb+EbB4xj9g4Rtar+4x3qbmFHrzWiiGaIzydADVGi6rAgfxDv2m37V9S5gC\niACs1dTkARkMCBuwDF5MHVmtdAFf6wnWZ38G5qfTsg3vYiJP5FF3TcajzUit\n24+g\r\n=0oDu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgx7ZIBPVzP2shxLNlZKfdkBgMnjHj9GsODifiDuy/IwIhAPwq/JQYXFk1VyPToSnMl8wnhf0f9ioZuBmnlQAsOkf+"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.9ef2e7c2.0_1602029658873_0.8241709241455095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-circular-progress":"0.19.0-canary.96c8bdc1.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-OOwCo8/HUp5Iv3jXj2/DDO0KKsOUFOdap4wztttXseeT+mQI2DG2EZGlrpXkEpyx27irFezGFAZOkhn0y4rQoQ==","shasum":"39af638b22378cb94d608237fb89e0361b247dce","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0-canary.96c8bdc1.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiALCRA9TVsSAnZWagAAi0EP/3MKADfmg/eTMAHdQVu4\nXKT+RZ+zDK16Im1WLjRt7ZH+XC0pu1Fs/Gx5MLqSyjWAfX2asH/JNLTtI74b\n9FnOfZv5tnAcnqKY9VgAhx+ahwl1lOeJqEtsVKfe79Ert4DPAlCMsXDxe6k7\njk7iNWKyp22cxxR/otyA35fRz2qhuM8wc0lehQfhl6MeRND0jAl7ItllHnGN\nmYgPdBLw+iKCpQC3f1cVfRp5fF6E1qdwmIrmnYOhE2S4e/ZvLdUdJOe4kiNd\n0t2eM7ks/pWstW/afYg0fW4moYDcdY4BL4UVmX7zg5jBxdNMjPuUjtNoGy+M\nTcnhAmjdBsr34l3IJ3rY14ADADTEtMCNW3Me4l8LANWA6tyfWdE9ECx7vaeN\nA47m2GfHEOip56aIeZA6o3++FRK/4kJp9NRphIrYJqRyqtQbT32kA9YfD2oa\n+pU+LtqxkEQEeGHu70SM+Tm0UozMEGvknnRgd/8HJl4U/YpVyUVUvDfLjRWl\neHU11EtlwjoiU6MMuEVlvxCKu3uXF2aR7erJlAnHyHDGPo3gbSVwB//vvTai\nFqXyFpuw8/OTJaWTeZs8n9/EYGODmxQIR72t2P7LWYyBLVKN2Icro7MZs1/i\nD7wD1Vyx8jSCPS0ervF83qhCjydLALFz0+pIwST7eQXu775ehY4zqnbBshj1\n8Ubi\r\n=Ev/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBMBe5FOX4IEeYyqVTP44QcnIqUVTQ4rPQkO9BAvpYhAiEAmwaB8vlw+VcNQeGOriI0vt+mDhlmDHNlBwt9OjVwrUw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0-canary.96c8bdc1.0_1602101259470_0.1824236676281319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.6c21f034.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-circular-progress":"0.20.0-canary.6c21f034.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-n7NKwVCH2EOZY7CW3JXG/G/ZAW4rfdWBQvaeAykKBeFqe5VtnIfa4/3UpHBbVt3ksMPF11MLl3r/LxlPvaKkNQ==","shasum":"15e5e83a39f7164c9173cd6f3a44db7e6df86fe4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.6c21f034.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGECRA9TVsSAnZWagAAPsQQAJPCc7dCsqJPo+/t9EqM\nJrzvOcnZUrjAg5+TR6UEZTpGLhnFNL/k631cIRSEf6bEypNHvAXUA4gGNHxr\n19bfYfQxTYzvYY0TUieK57uOuv2jihD/U25kKqKmUezeLZAjqsk7CoOFPSpg\nSpvMcO/qUmSZrmRaKejhjINbCPJgSvGVskXkL4wwcoeeFcQ1YnDnEQDqWg7a\nOU3gk1szkFTXjj4v0w6YtUKYFgGKlzo9PMp1lO9EaGO7lCKy6JsAmdCgx/Tn\nKcR+sBoa5WZJU8ZsXJVx+CBbT4mJ3qKSwVVYbe79mrA95eizX6UHiCKApY1c\nLizn3SbXBeIr5qGBSo16wvMZNJJ8KNVbcSRTCHvPjppbxWZcztzDzo2Ku66D\nJ1bghdDlX0wp4PRtJemgw8T+3Vr6WyRuJ7VyOC6O159d0QryzGr29ZJVK8Dc\nyPS2gunk1eHrHkqJHVZShdxjFweQfSfsMusgvVC6BavUXL+pUPswRdw/Fp0i\nGf59cXT/fuYl1WAgUO8yE74HKBxHTPdQvcysq6Qx93B5lktSNpNFrNqe96MB\n9iEV30Foj11ZDkfPe+aiRpEF6JSxX6X/yFdS/ZaoK54h3u7P13T4oT/f7mMH\n9zKmm/NR9KN8TBQOWzFFd4AHzfbuN3vgDVdWfyGg1hQemmnwQaYo2ID7JnVf\nJBXO\r\n=iZjB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWTRviQ9JUCm3uAEWb7BsHYPeoz65iCcLbQPgLp1sXNAiB9d6oP3v6GgGtONpMd94jS8uSQsCgDcimSlVGo0+/KQw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.6c21f034.0_1602109827739_0.18780567027045159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/mwc-circular-progress":"^0.19.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-BUAMnsqpjrhRJfei50yJers8vpWWjza0tPniO72FHPMp3PF34kT6byYnWCaNYySs7KklQKc2cYfs6/rRIC5DgQ==","shasum":"a48d6aff6bdb2183bb5af773ddfd0887a3060c26","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.0.tgz","fileCount":16,"unpackedSize":42697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkI5CRA9TVsSAnZWagAAo68P/0mxUTeq4EgcMlyDXUXZ\nnCM5hm5HEm+0+Wz5Hp2131FqHBogNikg1F7v6uQbwCDMfwgs6tC1L+Rd+wbP\ncx8x9zna4N2p6ddJWQdVgyJAHfzf7c+k1jYMgXtJTtDky765W/Y9wl8k+OCP\n8pM5YVlbVnxfAnTm+z9fD0/QIRAVOK2q3xD8LHi0xC3hDHdl+8sziP4UIY1X\npH72HlfG1tn1ZznAzRrZA2nmbupMlj2jaEfFisr9IIdOuW57OCkGtqM8nAdU\nYdE+kocCMhf3bpDIq6SN59gn/4AO9cZfpbKWTIVN72Lf0ULVgW0qbnLgk/mc\nCHfzHmONSKCNyq6RcK8B9UBsQPN0Xjue0UpntGYwdbf/xAbKE1i7aK8CHmuh\nAfv/KjaXCfDZCX2c4PhMFZh6g+C9LgUMgrWdeFhQlnAJNo0Dam2pqTzn8Zo9\nt5LiIxYzw62RGbi6OEXoVs3XuUTOboo6CL99hg5FG27PmTG3kVZp+VBSQ7Gp\ntbfwpSUVvIHzDVB+IsTwi4vnZ30GM7iYKKTV5XIHwY19Rg/vClFdF/ucezS4\nVinU3gpsw7L0jgI0WEsNpJkgE0WVpmyGDKGckcNSNePNy8waKsdfD5fUxb4N\nm+ok9hnkGDA1Wc7pcGU1zsVElb1wu5lut7fNJpPLhX1W81hVzQb+2/OfXYk0\nhaAu\r\n=J2bR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZiFJg6nHUsCpVublXBNYUnvM0G5gFIx/HtR0glO45AgIgcr2hK36dFJ+MRcMKErLwSWfl7xBd/fTxiT2VZvo3OEM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.0_1602110008689_0.3525439407051838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.1f026aaa.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-circular-progress":"0.20.0-canary.1f026aaa.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-L1zXvxZGsvBmpJGiJg8ohQMTcJystgc4gXTGr6AtSipMonA6fmiZK+ULVJt8CGR5D3c0jts6mar0Mmv1GdtWeQ==","shasum":"4a539a29d9d086d6d04a355e3156fec2158a7d94","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.1f026aaa.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hyCRA9TVsSAnZWagAADygQAKLLobzmwr1fyQarJuzS\nBLAxIBJqEeNLOy48p9GK7OOd654R/tFyAolEi/ie6Z9C4VEqOYJb0gMwtT9i\nFRBf28zdw8hPYPhOW5uClC1C1q8aOYIHEROpuMj08ry213bNQZEItxqw3JsC\nnAqZ+AdwX6s1/EjOsDwO21Tsr7iXIQEh2jU9bgazsY1hT1+yIYOqNlKx4AJz\nqvWEpOvx/hLZVjpzigbsXp3hZjV6ehB94NfO49wNGLiCezgmYj7sSqaDvXqG\nDGREbGmYRFw7HAV6yhaA+M70OzczLtjW48JssE5J/AMh9Ilf8AUThg11wDVn\nQvFeQ+W0ofGbEyDIJZbzZDu6rSga5AxNg3p3VimfNuf/Z6DHhJxs7drE/9DJ\ntNGFv3LzzzhF3yg0kNSn7G/5EC+b0F++8RuKjbRaZxTGb5fy61CeJtQz7TCv\ng/L1QgNcsTOgHgEX/o7KjxQV0YC3ez/bxuWrJtraFuqvhsJ39vP+qOAETAzs\nkKTD5duzkc3fJX6bxVauxEgNWwB7XKjefNp2L7w92voO/iiYpCwlOiR4qQF9\noyTBGdRkOwNulUvh/tGueWrxQgxLzkfRs1NaVhtJwm9AVo7MoBghQPCHvXHn\ne9sBCuWfuWOI3KZbOYYdorvft6qqlQq4qch7P1PLOloi8NDnIINsRCJEBU39\nySo8\r\n=i4FW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZydUjCLlAQlMNuqvCW6cnIeldRNQlMOr8QkuzajuiZAIgX5JNtMJCOW23qxda5GywVqDSGpQvBMD/vIoK5cjNwsA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.1f026aaa.0_1602197618225_0.3660434662193952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-circular-progress-four-color","version":"0.19.1","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/mwc-circular-progress":"^0.19.1","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-akM3CBFAfR4usRQ+FMGMUTDWhBH4s95569bqwCp62LgkWNA7mEXY8aMxnLH5TON8W5JG86tzgxBgj5NElOPK8w==","shasum":"8d10336a80e39af5b4983be8d190ac00da86fe63","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.19.1.tgz","fileCount":16,"unpackedSize":42697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tVCRA9TVsSAnZWagAAReQP/2+eTu0ZgIie17IYCJYU\n+rM0wooqogi2FztK7LAtRqDU3J4ORl6Zvh9UznJ+aJgOy+fZ/ndZWZB61tcu\nfW1ZHTJppl/RqBSECCnx9uSuEx2Pgg/UXIsCAXbZesD1JEX9FGHIViIlnXhF\nWGiS4iB2B/050FYzZU99IXLKiRE+dKjO9oVRxKDZf1JXRJohjUl/eb09Se5q\niApBcRi25uOIFp2tqCIZt498C23vg+iE/xvDxunVC0qydeW4oGgAvcnuKGyh\n8oSthQoVOFrUXQJwulR5s/88OaHbi2xdegsVaB9KTWzd/CjyhgAy5xtjE7t3\nzMOuDDyMvbASbDwI3RVUo5BhMpvlTK/BX5PgPtQLTPdliUo0LHCw56kdcQlY\n+mOiLILcAl7tRYIQ/hiczn9iM4yJ3Lt49CekQjDwTI4awejVqifncL8fTxGl\nAyYu3tgBgCSPuqXa3SuNHvtK39wcWZ+waDTi9yLP/HIZCQdDtg4/+cSd9XIt\nON4WJetXWCu5XBIpQ1//Ev0iHgKHZZlnP8PX5lSDDtS88SU7ZGnQad8+UUGF\n1PNhg34K52TnpxEfssbca6CZHwfh9o/0OkBB7RlxxQNOjKLZDz/o3nUNqrf2\nKRo36B9kuorGvtqsandLcCgNdXSP3duFEUTAPOfCj00J5Vp7i8pj81y/PL/x\n5JiU\r\n=KE3/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9NmadySCs+PSR8UfUaLQcMhl11RRkkioIQDzB7i+nuAIgMcp9S0jMrCz1gj66U7G38qDpFpxL/IfNqCpTtDiglRo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.19.1_1602198356659_0.9152606012059741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.5f6894b1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-circular-progress":"0.20.0-canary.5f6894b1.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-KLuz5od7xeUyt2knRG9zyPyxkHy3Og5gW3wwlC7lDtVe5uB5GOUAQ52w6SDYyfRqbHtSDThHjCHyT6mf9CwRXQ==","shasum":"f7182feb5ece223860f56b1c4d5b949545a6ec72","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.5f6894b1.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uQCRA9TVsSAnZWagAA12IP/1rwIfSqxHfjUJnrF123\n9mpH9zJb/mdVxe0uxklfXsbv8dNWhaVx0AJM/6qMveXfcEcuIeOatWsCz5P5\ne9gJbRGitQC7m7Pwse0w+Y/uCGX84w5bjHgNAAkYeKk8qSbHqdeBsBuXFLSl\nOfjsROuCuWqmzGM1q3/eg3eLSYlheg+TjCBYFZNlYs8h4zyS9Do8HSeIKvB7\nJom6MG03BatMymNODFxA8di3eJVWvoUBNhqncUObbwCeQ+0BaXfNTrEcbjAo\noBNfQ8P76PBJTdqaik3r2jxedfk3SD25JZQ5UC5PeFvzodADB+w4exus7LmB\ntTygsHGmJPQNWM7kI4wKwteBCuUE8ZH1jqVs5ZDR+qnjzJ7fNfvo+KE3eC7g\nu/HEtZzvsbfX89xMFcgD2xYBImZ2XnZMclWPfaPUAy44NXFNaSLOrBpQ2W1z\nOnf+grPb9ly4t5mtbmIN+czkM9/Gk9AihUA6oqE7Cpz79bFhXbdi7h1Ht9Y/\nn4GTGwZBxmkJiqKGTJmvW9mArFuUcVYTeN3aqRfrpsJGzz+tCzjDqi/nuxZ8\nSzZoKgTNgmsEs7apDQNYb5tVx55+vL94UVMlKc2kF/lwnCwyU1h8ExkGTxm7\nuCyT9X+uQGuTHGmXqhm7eIpC0yRm2s+Zw7poQfTft7q3L8w/FiuWwDSjSZ9R\nM+XR\r\n=hK/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBG07563vsRw5M5M8eqDT71m/HjcW/TROzAxIObsy+i4AiEAwaYuu4+UjZ40K+gDYgZa0uGkuBRRsAL4rRKzx5ZFqbI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.5f6894b1.0_1602198415963_0.5758803718955066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.f6260d06.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-circular-progress":"0.20.0-canary.f6260d06.0","@material/theme":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2qt4wyEpWMP8lbFdyV63ytlefrIvPKPMSMW0UXtvzBJGSfz17Pbn17nMqiu4J2roB4J9qDHCSGmJVnM3m7J9NQ==","shasum":"18bcbdc4b21b57f73e3393b12504a814c781e4b6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.f6260d06.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnnCRA9TVsSAnZWagAAaoAP/RI+Bp+9CQWlEbWF9fET\n6B3FMkwN+Y9UAkUO++sKlm49tIaqfZpQ2Yk6nfrI53pUCokzMKqORxuw5sPV\nXfC9TIAq+EmpBDUNbz5c6xHyajanEQoMS1RfZNa51PhgqyJQSNHiCHQ3IjbP\n707a7MHM3DooskvwtCAeA9aOOScs/ZWlgVbnxhA6uYQonoVaEDDpb1n802Pg\nXbZh7SxKYtwf35AEAqYzGDj5HxNzmWTKXdoES139iRapjDhml6tBTxSY9H2L\ns5pfT9FC9eqnd0XRBBnvQUp8uJ+TdJTg+UDUSGB4ivKYUI2OGqySmOX0cT4x\nsDh2IPh7Qf7nd3qBZxWk1cy73MB0vTp/5TdkUBUyLKNZpDvlX4QHKKgnWaa9\n9ObQkSrR8ilElbNYFs4yH1+i4kmEu/jebUI7ZOiokc7p4NKy6bsg99Zqwf7v\n5KjnljPApD1s2zXhijZxBtdn6Q2S0pQzryBaDMW19SxyYhWJrVfW0ym9vnqB\njhkjHzJ1sh/ILTvit+IoTn0kCt79Y/1v/xCxT5awt/Od/6oDlqyH948ZaH3z\nz+dHEfxuR6TqUJePePm/KpV2uM4OAlMHjDkJyaWMXGUkTQDIjUIax3bxYPI8\nQknfZnRVo8M7mCgGhwR/Lpxzx1iaFB1+3BpXLSsjPPkKgnjsFGHnxiUQQ+RG\nJ2OL\r\n=8Hwk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsX/cJBQ62vf0r8uWYTm6FONcvRdrrp1qnc3PcHod1eAIgKB6DjG4skCEXxoFcL++L57vi3yUkCyw+5Sd8wBO/Bnc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.f6260d06.0_1602542055141_0.3724558632317527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-circular-progress":"0.20.0-canary.2d1b08aa.0","@material/theme":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/d6d12aTf0s5hSFGm/H8Go8ng0o5CIwVXwvGri8v5ffbvMjuu5UB4JZAU8acsIjaEiAcVv5iSf68owDqvvX/IA==","shasum":"84201fd9f3be00e986861d7d2c84e23d50e9b9a5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.2d1b08aa.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5gCRA9TVsSAnZWagAAPusQAJy0QgIgzAYh8imZw99y\n665dPoCOy3vXDNQfaNlXONA0xyjG8VTQVIJl+lgSICg734GCUo8Hq87XVT5m\nmAjlr1fZWYrvSkWCpoVvM05xG41bo7V2ohPsPrb2AGedgWtHAlAbO12ZE84O\nZSEmIwyvucKksP3kl7dVw/RcquKpDuR1LzQGtttGG+/HEECCj9IMuuHrCXIU\n/gUT+WE4bbBcjS3Qli7l9sxGxQOu4ZFwTdp5EqmrDVw3s/X5n4tZldpSA66Z\n6zZgI8M7eHnWXektrgXFmaj7k1SI7q+PD2WOc+xbfgzCFeGDEAYrNrEtgtwN\nFxjNZbwH4CK8aYZqm8ag5QB2r0C6z6BnQpBSqW3mL//zktiu5XYvIB0DN2LD\nPLmvO3pIeeAb/lWi/9imaxA9hFqm8UH3ki9+/ERbdl7NDvyafFTt3RsnTrs3\nmDmdF7a3TGyFCugpkDOTR+xma4MsmoAx+FbITu1oj+4S0+ox9txSqhsWv8+y\n+java9+0adzUpaVsmrpcK7AV83OxFk3Mjr0QBPo5G58v3FpizxJROaXo8ZTp\nSD/qQKROABY/arBpZgzvZ/P/MvY6VVBqMDhdqEy2Nnb7FVbQPnUoCr192nYB\nU0ZyeSJWeKBjnnCLQwUPfNU6hTbcXuXNZXnyE3jYOmsNR1ZeOLDPkJtk0swe\ndzxe\r\n=oHYt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi91yz9yMixOwgbxpkVr26Au64bNAmBxrUyDXCbcR26gIhAOc8L6fsYE0Wsi9NU+FsSnxHflEnK5gYLYfI3bDC2w/O"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.2d1b08aa.0_1602616928175_0.5126448513871582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.5bd58844.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-circular-progress":"0.20.0-canary.5bd58844.0","@material/theme":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-9dN8zuCVX2Y/KCenqqkVaMYcNLdQTfH0I5rYAavai8PEputNYEVWYcQcVWswUaed+lfr1VkRgRXLLjSlbYliTw==","shasum":"a0bbb6312aab28734f1a97ce28816090233b222f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.5bd58844.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxICRA9TVsSAnZWagAACmkP/1b7deInfDE+6IBMFmVQ\nKdVFQgmiwvteSw3FlRUqlnE9IO3kaE9LQFND3v2ANJVJSWaekN2YEmhpvPG2\nlu47+YefmggdA8CaWq2w80wbpg239hlsf2xEEd1ye6y/CS+bbSXKr4hKKote\nWzwjbtQzLO91tzbPMeX2FA0fZcGeFdDxsg6CYM5YXctJ9uBVLU//JXXDVprN\nA8BKxhjD3BfxbbGwkuQn6TLJEiGC9N0y84GFnWGTmHJ0MfBX8cPW2pE6UWa/\ngs9iWA8K6nU3Gi5jCF7KJqYyYceIHPMjmb7K1UWLil0WDM8BGKv2T1sli6Ix\n7qbgIn7XYE74pOV/b3YpuU+AFdLV5I3f+uOeeYFyyTImWz8Lqog+6Ps5JXcZ\nqcQqGJfOpb4fzFwrAztpxiBk7Emq6kq9fSgjVP5wN8VOM92Slk3vqPj5c2Cc\nGLE1zgSP1Xp4V7LdWerTtqZCPD1WC80LDok3lzTthN1njQOqwE8/Y83x2SER\nGQV8Ej3tplOsRhTyiwp7OzxMU4FQpNfZ3rqvsNkCs1mxc1vSY+jAe3J8nimQ\nlP96QrP5iYD4+yLt1TSh+zMCgsxdjg54rUggfNQwBv61bFLIiRE/0hDlPDXC\nfY52oP40Rl09v13OrY47y1LZcSpdfbD1LACu4uuHuQtIlveN7eMK99o+z58h\n1Mnv\r\n=5MG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkF6I6kn8DqwO4mkz//4iaAGrFpANBu2BU9froPO7ZuAiEA9j1zILpzZxT1DPRe1+JHLz0ZVEkSNYHUuycjSrHCatg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.5bd58844.0_1602632775558_0.9085841489687367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.bc846b29.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-circular-progress":"0.20.0-canary.bc846b29.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Li7cwn5msnpAyigD/r3MtwjOBn41Rf5Hv+AdZahWzA/65MUzt0NM7esApgn5jOnRQ7/1W5/aiODBKQ+mhZbD7A==","shasum":"661b09c5a90322ddd60964a73c3c9a7eaf1f7a97","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.bc846b29.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BUCRA9TVsSAnZWagAAtXsQAIrPHcc+OutqVzlm1ixM\ngczNyT7ZA/zOeBe6rlUKxWfXfhlklM+Y8XDUUUziZiGRxqprBjqQ+FpmNb4U\n0TVb49XE/h5td1gD74AON1d8qSGorkJAJdD/bR8bECdTkEnMpfCtB/N7PRPm\nle3IhnTmGRqoHuxhJRMcXu2SdYjJX1ZqX4c8/jxt+gKxeUbcnBsfhvgz65wk\nIQAgtCT9Jl9u0nCR9ts8lBv1RabYO0TimzWi6CZCAaD8ZZqkrm4DH+6UPZBf\nJWLubne9rQjlNz92uhMm6p84GbN+MyRSTukipgU1q6JO/2Lkjn9x1B2FykoA\n3pcwFvwJoKcnC5jn8+1NIN9kfDF8A+lvvivvh1VzswEDA6deZb2nK/Q8BAMo\nHef6o6TgCCOM69ilkZsfA1S4Z+J8ktvwtS7KxMFLNnjoyZr74hwTixE/diJ3\ncO7UUkXAMKrxCSRhhdxVgSMd7Yfv/rZwGArT3JyNBybzYQ3HdPimYoNHRCzV\nvM2+V7xN8fZi9ctwfzI7K/fW9YbBUJiovZeMv+tLpw2aAG1yw3V2AJpIGDSx\nwn0UIf6RPxukjaExiSp3GFFhUUMgL2ri/VA/6SgZiy5VoIDRT2MooqkQHB9F\nNhPyozFaJbLu6K9lzINEsyPoEbHZxAk1AyndfvKRSPD65cfDx0XYE5q8CfCM\neM62\r\n=RA0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLZVRQtFHB+4g28wa8aC9KTIq9EXu5iG5wBb4KwLQUKgIgbRkMCmX/Uh/kbkzSkm+0YelrYjovnAlXq2F7vdsDIIw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.bc846b29.0_1602699348305_0.896039154734168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.3280b686.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-circular-progress":"0.20.0-canary.3280b686.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-iZi3tMnbUH2P3sRV2fA8yeabgCsok2MA+5LJsJ6MR1UshZ3KX3dsw2eXRnI3klC6lzKEmj5Qjm2z6QJPSLV8MA==","shasum":"d13210537f9c1d3945adf0903f2b469ef87b9cdc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.3280b686.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOJCRA9TVsSAnZWagAA8UIQAJWdP0ygmkHn0OR0k4Yi\n4+RQxbZyUXgdNo8XlUrqBjHvErE9Exs7pJ16ZJnW7CKP7UNrPQF2jJg4509b\n+rzmlPG9E6cVsHD7OhEZuXvTS/IJ94Ajo9wMJ0xJKYAi42zpfiLma7nq0on+\n5uD59nFQELYTPnqGl38uha1d91CuOI0SOA/A+vj0JXsLBiOi4aaYJARbFa8E\nbUIrpYFLXf+gOXIXk/6n+gd9JdXsOnnwB9p1O6JW1WIkDAdkNE9MZBkBCEEf\nIp1PWUv66dMtYiCTBS9ALEaZAH1HpzN8043z8gQCC8HRSx3Y3cF+tx0NxtEi\nQfEe8wtH5I3gi2zrdbeOrvCIBrCW5Krr+vLBrVESrdJtNY273aToDio91SPD\nSDObX+0rWyhpNfmgiU7fP7iHr4gUYnFhG1VIWSQAxYFsaqlDkTZkR1PG8mlK\nobwiOT4aeDJspBiHoQoTOC88sm9aLjT+nMwASu3j/FveOwm5wpMO1YVSrwbb\ndlllpNjtieQYUdFMJQ/TgWytfytAo6UNfobtxLe51pvVNNp9FwaJP2T6Ir9S\n8hKtMDRDTsgBm66DPrL08rHuepi59fx+BYRlg4hquPBcxag8CTCikOTeL8dR\n0gl8PiMCkD6GJYrODYAl1M2b+5c/f4nuL+6CtT8zlyaipsWb5UiPyD0SCkkO\n1NEo\r\n=BobN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5dnqKqyQ0M1E0s09T4FlUpgbTKTIhFvWweDq/yT7v+wIhAL07cqOsFfadTtEt/10HMoabSTwfuACMxrpANeYthfSK"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.3280b686.0_1602806664978_0.9981316393893374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.9e94cd38.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-circular-progress":"0.20.0-canary.9e94cd38.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Gpplt8zgtrw5revTQLEuaSy3ihag/af75HEV3E5+U8r5ELqaw4mq4Px1OCdvhvtk3sdEz07iYTXF3L1/po2Fsw==","shasum":"9cc188fca11bd0b914066ec6225f7dd4e9bedd86","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.9e94cd38.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0uCRA9TVsSAnZWagAAt/YP/37K79G+mO9PvO4kG8kh\nl0rohiEUH51DKcvx5UJ+I0gw+4nTs0UpWR6SZqpxaVkRSS0IOu9yCBxwNZyA\n9VwRjq4OUiUkAfs44XwSFuiZk9P4c0K9j5lTGY63JoPOTVg6W5PErsZ6C+zO\nsFcXyGaPo43coJUJliRsrf3Ka/xOPQyUayLY8EpdiyDscvdhQK3naHaiTIq1\n7+wHb3XoKh4l1epJBp+Tlu51AJ15dDuW3KrQg4SW9IYLxenJxeP5XPsuI1o6\n7KNgpsq4PiK9BVOeawN57aB/FcvVa1AXLQsrPxuABXWRpXVmCF/BxHdE1ETU\nDypuHgyde+W2mGV1LMID56dqZkl9vcegydlCuKf5oIdhxvEb37R9zISTIZla\n7/V3H1G/2CWZvIm9mUvCd55zjQQiofZmR4dx84Z3W0WvZUnn8z+DUjFqKsv+\n3MTN1gOjS4Y1jQunBKB+SaNDsMNxL/Bw70iZUq38/4nF9sinT0iXgrZ3ox3x\n5OJjzilRm5pDTcgPugfJzWzEJPWEnRJPQGBnRK3W5F3ENIuCBswHGba9ORiZ\nItEpBe2Hw3QbQEkk/WN+bYpPsTj/JAfRsHvgIvfXqoHEG3MdD1ZZK0mHuuuF\nr5kyEzA6MnAaLl4+MOmDTxzOjVwWZ+sldFxppnpRhS7cBu/1ekZJT+0X21ql\nuGSQ\r\n=2z30\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUj+XfFxSlL7Pzu9E8YFBT0cqJH/ZnOxS1c341C21bBwIhAP3R5UgbalmIZGbPKL1ULuv+JyjVHdtU5akLRDmz/HKu"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.9e94cd38.0_1602882862585_0.8608155252552097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.4773c773.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-circular-progress":"0.20.0-canary.4773c773.0","@material/theme":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4SfkNVMJLadtGLd2HbfLzAzcHoQsrFn9/crfs96hwz559/IswwuZ17Sa6xnB3Juz7fu6QG2dTXfD8EHE5EqQPg==","shasum":"864d2917c82d689e1f31c7ca963b9a0d40439366","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.4773c773.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/iCRA9TVsSAnZWagAARr0QAJ9zqfmiNwnsF1TH2Pr/\nrecVhIBfxiqvrof6LVFijU6qbxtnY2V+ZnuTyOien8Dx3EHHcUyP8ozDHqIw\nJhEwWIf0KquqgR5S3l8zOaO+VWnEZgEJVj4aY+0Vh1tEhZK9BOTHfv51ZLEK\noHr3YOXwfaNDGQXaV+RjnIQTFaBiSF8olVcmdBRA4LRqMfWo2ls6++HB1E8V\n21+rUfQc/KaY4W8DptgMdxGtfytx/UoH5+AZ//pUZCUJcY1aHUwJXXkEHxXx\nCYyzsIk0vhKGMQdeJGhGpwXNSfru3R4M65tzqvg+K028OsOKX9CDkImf4htn\niPcetCrHRpE+sySCS+H+A5SaVSsW7ouCx0iS3vijQkLNUJvUpBapAYVnfz/W\nwAggOmmV7WnVZLdB4OngfqisjkuAXIJeHt8qnDOQY2uHq+VOHdF0FRSvOaoP\neluaol2PBvlQhjrpsAcsnBJQxure+WSZNygt9j0/aXKF/qFf90FSf6rgXGsz\n6o+vR830Brm6IVFltRC/2VdHYHVhLsBq+wh5agB3AC4PO6APR4HtNx/CUlO1\n8m92cFvVCyCvocha0cIF3jtQ0WtDHFnnBGUmkDqUl2DLIj+fgT9j4KqX75U9\nYG8PcfqEDkupAcP4NuiZu/9APaMCnU9DfJYVD3cUN24XOdmz1Y6LejtwBGIR\nTWOs\r\n=mL7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP7P/1ZlEZAJrQ2CrB8ZMShQcfIpmp3OWiJ0HjWLzStwIhAPBpidgBDBVyGbHHPyMjV07YHm/HM8scYq5SIxCn0Pch"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.4773c773.0_1602887650194_0.3349657317860999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.65787913.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-circular-progress":"0.20.0-canary.65787913.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rlJjX9VTZMENHeGzoBXC3jyodlUNaJLiPEvt+nEogAZcGlUOeolaFfvlgx6B23tStEnHMMKej6zQ69yShhblPA==","shasum":"d35f2ab88b66454a21330ed90c761b316f7320b2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.65787913.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeANCRA9TVsSAnZWagAA6yYQAIleVy74qu8P3x1HuxB6\nZFbm99kZ+KnYU8KqIWfUv28+7S4Faw+SSRfz4GBCpTtX1XXsa1X2DyKdwxcN\nh64g+47d7bzndstz7F8AHi7imYClrehtxZ5DeTR3IoDpMWX6Guh06+E/1p9y\nsjO9jOECso3dd83GM6jLK1lQ5WQ2gnl8IUZXWjETq0RkEqozST1rMdPw0fMa\nV+al9seA4a7EJ806z29TQbbK7fDr+RCStMQOdnVe/wJhYT30l0bjGOwRKGyl\nfv7H9RI50dvMFinXitEdlKQIsoen/pAoVWgHkbzKtxx9H9XwmVxAHlooWTYF\nNKeORk1k+oHlWnvvIH4sGam9VaNcsLETXU0FnREFXiRj5xA6F8E9SJU48AV/\nji8HTvBFbTWZjnJwdbY9jd4dnXZH4MlemV7rmQuzI5SND02XL5uE0Vs3BQXs\nU+ke9dM3ReykIV02uzvYISJtIKbGFdpuI+zSoWqPW68CkTneCAbBxqgMDmUg\ndlDXTFm/i5+0Ap4v4zDyLKn87Vc4fX44i38xEpewp3WapDbkGPDPAebT44g4\n50rnLrenwSiG4wFNMKrL2f8rw2BijRHeeIylszFFVBXgaSSxs82rVMxaRHCw\nMSQ4G2lavQ7gronYa9IspSBGsz2NLSAjinOmhhPr1pXRxoRx75QC0Ws60EA2\nyQd3\r\n=zINI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXuhAzz0/MFjeDM2+WyRnR58Lx5WLXbyDcYnemcmARbgIgXSUBOB7ZIbb7UBnvoOnZ9bcZb/ZzFbnrDi1Sopvv/ik="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.65787913.0_1603133453550_0.5382971508023378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.5485fba3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-circular-progress":"0.20.0-canary.5485fba3.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HaOIU9V61Rj/JWS7ROnPZTTedYnQVGMn8p3btswcyeetVJ/ybYkBRGBYfPwUMRNOSVCDrYiRP98+lS0Z3sU1iw==","shasum":"60519ff2ec3621fe6a94c4a88cfcbcdc3d9552f9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.5485fba3.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgP7CRA9TVsSAnZWagAA0CsP/A59B6lE/m99hb0VjaWR\n/GqSDimMGOvpGlOZqZNMxBpAha8aEDyam5cpngkbC72S3ghB2zByLJ7ojN/x\nGtkE+TebrhUJ9e3wByKEpdwhILKId/UzPrZ7Fh9sVWgEdVXQwna0YU3XMG8T\nFsLCw1nBVhe5Nsg2evfpdWHgBHBuILwJiujubVzp4kS4CuMduFHXPz92UDYy\nJYtpUucXtsk4X3kKi5dFf/MPFO9HFSbJJYkB+6XXM5CDztNI3gtrLqlGu24w\naw/0Bm6eYMzjg1+JZ0SjtVTgMl1TwHIyWDfm8NwSDfSAxODOOYCGgjSN0vG0\nbh0E2c8l5khht1ob9xlREneR0I0wT2WYOnt1rgYLf+Crr3jr1HubaJMm6SDi\nJVvy2Wp0G/8QxyoAWbUaPXThDL8SATiBkoxCUEwvgscHLhgZ67g7eMQael0O\n8zdWKsKXn9m+k/dP84E7vQOiV6YPhfNyW4JMEajKYtcK1ZZfcYu8VbeB1MFZ\nmWCO2X1aywFv60ACtJtr0OkNkCdCTRH6tRDEReDKK7ZAnF1prl5TdhGqBs0X\nuZbZRymsCQVYsGGhJ6hA2EEmRDc0/4Jx2hHqxHDmgBilAA/93/en59CGj9cn\nDxIGejLQYMR4nsowCFG/PWkyzjxX5eMkcsHmswn0fTq2gDWpg4AcsWEHl/AF\nc3UZ\r\n=qG/+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1w70pu/FTQf52YEg7fKOf4lYWOdleLXz3nMRo4KYgFQIhAJMpdc01e1AespOWrlsIhjWn7+PoUMG1npcbCH/acs6t"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.5485fba3.0_1603142650557_0.21181480037933254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.a39d0a92.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-circular-progress":"0.20.0-canary.a39d0a92.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XyAi/oRaV323okJxzpZIhjFna5p/0wzLBXE9dBKSbZF4gGeBw2ZmHIu22CcwMHyjK3EUvrv4uGDvMArDf813gA==","shasum":"9014b3680beb83ed29eb7d751c1e4efb181e8952","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.a39d0a92.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0njCRA9TVsSAnZWagAAwUcP/ApsmoiO9VMrvDD8/jAq\nBlwQyZNhynVTmjzu57ku4IQZTgIBS//TnTUVYuei2wqKHFNo45iMlUIxHtqN\n4GM5pD/Vi7uVV6/5AiMqnoubZwDAcpgiAr/rEEjNsrnckGAh6Dyuqk4+ROkM\nOYQaeWBoYHf2BHzryjkQ3yjYNgPlHcwfrgJHp8E5YSoFYXEJlwUQJbL0RNJd\nvM0yDWYK/CSEdeARsCvTBDy1xujS7dMHyde/btdYZDCije32BhxaPRRuoGwA\ngZzHDPulu0An4VVN8NDANFn4HGot3VnX7xjPKnaxgCalaYds2DSJ/ogR75SS\nw0o+56xdNMOQO7+LmHg78NkE2Os4ftKpLuw/j8o1BaYHH1VpSel5egg91nhe\niuULu/cfWorn6W+jcX24OF6mhS1tRyId5cj0zDdJ/l/CVhxfY7KFdS7aL/yj\nSIYreAi5S/HJNJA7uDiF4XieYrDyQ18cSwWwW3ei2Gkz0fAlE/UFY0uurJnV\n7itAHaQsMdjE1NRK4VyQEcUdx9DOqlNguSQmoiALnCwChxjRJQ1h+wng4k/n\nGy3ybfYTKDehXo7gVCUBXkOI584Y6Z0d7gcYhwaHikCqknSU5xY3/zh8CZgK\nvPAUwgVvmt/7FOINPjmubOAXOK1RPlVerkSCxEVDhXLMKA9xmXQ17XD++Z3z\nt7uS\r\n=VI7S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3dY7O3tCO0ye3RnPq8NiZnTHw33vS1zNmFAD1CtoaaAiAL9yLP5ITq+l89T8mTcErrV5+Z6W85q1TUn5rGipcwbQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.a39d0a92.0_1603488227304_0.6326014736827545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-circular-progress":"0.20.0-canary.4eafcbc1.0","@material/theme":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-myTu5yYtSdds5aFkBq7hc1uJmIoL/5CQJB8d1yKUDF51Y/+uwQkHXWmCGOVaOUagMelX7PjJGfkI9YNzheJvug==","shasum":"fc77e4251fc45804faa6508b674d825058f14fec","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.4eafcbc1.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3X5CRA9TVsSAnZWagAApIwP/iuQG6YYpTH6+zGj+u54\nNFqCWesxrQ7ltjyXrf2Drjv3moWsz3kDc6mjh9L2IIJLlghAkWzrApVsdE2i\nHauKFGqkZm8/IcEVkfhqYB6UbIVZo35r9R54+aWw2HFtE611hDcr8u6HN1cm\nd0qG34QMg9GhDCVDs6pDFcn8PPJkiP9iPaXDm/q7fmvG9rKQFOaNrjOwOMD8\nsm1u3WsdXTEXrjPUXOXn1gU/gpFEQ9+/ymTGmlxPZZ9MNaQdCmFFTn2AQ4ka\n10vZqh/+3RLySHt207RxERgaTCap4AM2xGxS8prkVhV4J1sbgEroCqfWiJXj\nTghbOQtMqUvmq9P2qwa4ETn2cXvloKpVhe2tIreNh8VHEmLZ0L/GdHWwc1y9\nPB5b+zWJCHPk+mNBcqutgZjDv19brJ4ZklbA8J1/3umphtcL0nbG2w54kNAA\nfb10Yw/3FlTqrbtWK8XTjJEpSjYTRT7P57RGV/q1qoIEc6qy82dU65qtA2qJ\nF23Wnsb7/F/UrD4mxscG3oWd6RhGx98PvFARE9H6mnLQTni7zv2GrVlYlj2O\n6EhALNtNQlBWoJj6KpSeT25DwYouPwbdHzCa6fOUSZBCTWNg/ZPZH5VnGh9i\nbg/c0xRmDKq8NzwYqu/mBQZ5IgU5NH/zFxEIxn114Qyzq0bNEQMDPfANxmu/\npfwV\r\n=OuLa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALQY4KUEn6RZyRQKxiYj8TrXGBXQi9RdwcZBB9B7XXcAiAGTXqUGXNyO8atACss+u/jsE82dL63qa0hAGduj6QsMg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.4eafcbc1.0_1603761657153_0.37027968406173795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.32961593.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-circular-progress":"0.20.0-canary.32961593.0","@material/theme":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-VaUo0uSQ/UdXgZgHZTOh1h36xnOSNdRILh/rlRs4EOhBS/9MkBY6Cfftry/284Hd4sgf1QRSgnkxEoFr0ikugg==","shasum":"b0629c88300907b24607d69c521bc6feb1d1b887","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.32961593.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2oCRA9TVsSAnZWagAArdkP/1VjkVrHKbo+Mr/ECHfU\n+l5vps87tjYBooWkdFoayLgJRhMgue9nodG/AhQdjmS3tbReK0hPT/0KSGM7\nvO7tavtzBWp0PeA3pY3Lm4MPV9uDabQNvcATJpDkbB/CHTHyv/Vs/VDEviuV\nXOyxgnlIyX97q0xoVafUfYT8RNMGiF8rGGHqmkf5MNsZBKNDNEo1lO0rU9vh\nCcUaXX7KrbBtsMLMQFN8vWJFpNKA5a80XwlIAWMXFF7vgH93OBLlTvwd/2oU\noegQ6xoAWEhsUTgJhyc6eUYF/yjKQE1yQpGbJhNer8cmz6dafGNnUc51dUt9\nZPBE06G6Ows2YFO5Utyobw1ves3B5skvyy6i2yW8RHfke1jbZkMTcKEj6bPT\nbPP9gH3/Q5xwe8gM36EgiAAEt550fPL7FkaPFniWdbS3G8KGm0vlvjO0uA0H\nCPGUlP+qW/T8cgS+iSpdx67pGYNSDTav+AFyYuBuSXUt9enKxlJezCzhM3cc\nsMVD7WU33qO0Y+eSY1SocDMU0Z+csElA5WQj4gDXKHy9G+UvMjjfzSOVMB9n\n1jVhYftXX/AveS/TUq3ewPfNP1RUdHR+SmwDmzRGtwVunUm/KML/w5EwNt/C\nvBc9MQEzlAtjavLagdbo0zHeRg/qIYPptfk8behv8vK4pkvvKU6weGW60wv5\n19T2\r\n=2S5S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAXAUNDfzQovW0ssUT4BFY3Y/8yZVAlhPpXnEFzYCfKWAiBI694ZqDqQt9uPjffvDljKzVQMwpTWnKcIvuH7jbepKw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.32961593.0_1603845544439_0.4821188468047546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.8e3a0601.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-circular-progress":"0.20.0-canary.8e3a0601.0","@material/theme":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AqMH2/FsgWLdP/svLPxdaUzuSLtIlBtCZo9gr3+DgJgwi7jsfvc6rzXyhlcY+uc8I6ApU0dkJqUTzrXisp4jYQ==","shasum":"9c4ee35da990255c2f8e7253efe7978df51e9c6d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.8e3a0601.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzX1CRA9TVsSAnZWagAApgcP/1Ss6bomPBzgsmYkmiR8\nsdTKtiYjCJfKUSsKuB9d/vdAB0iI9/Gz7I7m7AkSJasF6NuQnkh4bKkPozAQ\npKv4xhWKf+4ECeNE1VETUgFQTDsnBtVkzJG7N2u7xVbqCN0+eeQaEyGfJ2EW\npNjy2rEHfVwH1mcJu/0dlPjf97jZGZW0J4tDl8euYAu8Y9hts/qlm5kkljAf\nU97Th3CQmKzURrUByOZRyzTxgzEZu2Rb5OuvNeLRohM3RgyrbhUso7xWS5+Y\nt1SnsgJMtpa0zFs5/Eg6UCj1GJ3QVnOqzyns+2jjkfMFP09p4ktsmrBmz2Yp\nig7UNU02030Da3AUFeCmHHjn7J+esww5fHmH5aUusxS9nlwjJSInEOBKMmPq\nAx/wwS7D2TqqHLkmM9I0YjjDbC5LLgJnXLrVoeV9zsN435Mm9ux4LMEZKSYX\nknJFmQBwY87xYsbQ8EEDxttNslUxaspvK0SKwb8LLd1nElCRu8H0YFUgT3w/\nNmYDTkeEeFSpiksy3shQVVq+vyhPYOsMdMhq2KtN1H1bkxjgOKIsQLAXI5JR\nY+5mR000qVe3ZOVIGjtRvpblV1b0/9ANm1upwGLLpetH37nWLiYkKCGYxhNO\nokwtnDFcZ9aer+ja4mliulvmR4OWzZN0fcv5mCYU97IpOd+Yy3I15k0gN9t/\nV1Pf\r\n=oOmu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJGNNNz5hr7NpsLg/8Z9fbrS60c7nJ+rK8ITyK4BoBXgIgQ7ENTrRMc+reVAM3TE7aJDrpQT+ERokZQEtEdUP9lWA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.8e3a0601.0_1604007413196_0.9085148793865512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.178c25b4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-circular-progress":"0.20.0-canary.178c25b4.0","@material/theme":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YoT3TgB/GMnyzo2XGMhPRR2RmLG4Ip3OCb1ApV1ogn3pJpdTll+1kusBtXLDquh8T3pxc40kg3dEnP8H1egwlA==","shasum":"f190de4ee5172a83e361ec7ee891429f8210eb4d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.178c25b4.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzkmCRA9TVsSAnZWagAAj78P/0yw9JvH6AlQIRH7+ooI\naW75DUBq2YKmB5u7hSowV00P0eLkgdv5m2LpB7M/XHIDI6D5Duj+paMocWPI\nyKG8AUvWy4bA/5ttHVNGb9QYWTlGvSMk6zlJd6HFTYYXUBSOKBdt25KNQc7z\numJUyYWdDo3rFfiR6vijlGrgT0yagAR2BVXuv6UZFTsQfQtVxgSn45ZlIJ4B\ne+WyXjZRbmEFxNnycCXgMmeWen29WP0/cdz89LiwO6eavfa4cWcHw4pI0GF1\n3yZcYgdtbqg96sykUG+cpCNn6xGm1MzscbVZ0h5yTCIBIqQFfuftwi03VVVH\ndM9i6su3DtAs0v3AScVGVXJTuUUIEqmQFVeXkZVEjWUeXcCNuVFz6uXG7xJj\nWaXSKvzMw2FULDc6F/RzqFYo/9ExcY0WiQaCuKST3Lv39P5q1+Szu402r5r6\nfJ56AkkMt9RNPZZfhf7VT45sJ65muuoIw9qjzghKIcjoe8gGckLwex8kuhhC\n+JUgKPZWH7rsnKGFmdS8qb0tzILWGLBeSQuRldYyvN7PvNc/zGgX2HqsXlAQ\nteve8MFu9TfF/hso2Hdzzn1ZJW/J30qB6kTKc19wjEq1kKVYMG/kY/d8frxP\nBK5vGJ8chTIO2DfRqaOUSL/cy+qiKkKIuRIqsfrdU6r3CK/8s2BRPhFqtGvE\nfXeM\r\n=h1pX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiCs4Xdq8GIHjbwhhDbyb9ZiEgx9179DGSMtchnO841QIhAMuZtBUmoGOqoOlGURhdff8Fg8v7NLqaDFcrPKBr+mPn"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.178c25b4.0_1604008230257_0.7583526374858762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.124beb49.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-circular-progress":"0.20.0-canary.124beb49.0","@material/theme":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DvHtpc93RX0IAkM7kODbo5SFJVy9zpfz3jVEPY6jDNQrxPQ2gWhAqMSjTJ2XjzayMd+WN1aKlCjyfFeQfxJsjg==","shasum":"8cd7eaa530592acf2d1520f845cfe7cad7f23eae","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.124beb49.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqKCRA9TVsSAnZWagAAsF0P/RcG3T6xXcmrCyOqPOxS\nbPwPLjS/o/Q9i6+f/pZNLImuzOD9JW7Rbv1uERS10JPRmkVtflwfgGiOaPDS\n/y0niAz34QPkpTtTr3Bx2yrIikqIinH0CQvA5LRXJbHk5dIaolkr1uRADEyD\nLexzCl9Z9Mdh3NqPqUwRm6sC+qU5+bPf8NyTjo2Z3JixGU1JOby9IaEVjlFP\nFET/v+MOk/BAp13KgxZJ5PqH/NqTJqFyQ2NXlc8LDwC9LPN7IE3gYOrs92AE\n8S7u2547Y+iJgXgh9G5bTJJ00MUxSFW8mhClmghkk/CkBCvFSKgwGeX9s5OY\nhQCw8D89RlYckGjH9gKF7/FVMXAfEOHwMf5C4JhQie2xRt3edAyCoWTBmqvR\ntB3ZNL7YlZcs/woJTTOEPKvqVXCnl28XfBX1ZxPE0Jd/IvrRpv/atPSQnlzG\nt1rsSqyBTYX+vvBY1it1sQNKWteeLlYDs9wJT5Ik0YLOtWvLlgUn1L0c3o7x\nih2ZAL6tXf4ViD1a2azI7K9NQ2bBTiT8EhSF1fRRi5yXYxsQ1C9XtgFSHdFw\nYSaYjp+q8tF7EMk+nz1PEEv74PpqHvytf4Qv3GcfvQALOl8hURtICeTcl/+E\nGBKtKUkzP4x8EizsE2pZTbmlzvohdgSIJYizMj7Rol8zb6MmAbS5abKg2sI9\nnC28\r\n=MLtr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDTvt9WUXrhKuS4qQh/i4SGFbD58Nsu87lROT6cXmIWAiB8nclS2uSNB47jvVcB/dxUs40HVeYCleSFTDKTkA05Cw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.124beb49.0_1604102793961_0.6322173335250978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.5937f468.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-circular-progress":"0.20.0-canary.5937f468.0","@material/theme":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-FdasaDacBqgEBVMVL4+LmS2gbSM60fPC8L8HgUna3NCyvkMw9FGdVHp/HNCHFgqlOluEvRnw0u9T6KHVaKToZQ==","shasum":"1a2ff9903c63eb42efabc4b67de3facabf3315ad","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.5937f468.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxekCRA9TVsSAnZWagAAip4P/RI8yBJhxq9dasfTtpzJ\ngbWm+KqT6EwgeQtminWK7WCH09CBCpzJIjH7aAd3JxuNWIMYmPxHAcYtgcee\nrg6AdcrBmytaZH5Wtzwwdnie/1wz/hTTeSWcXLNCRWWbIfNxlOZjKYFtNGnM\nvlIG0b1MrPYZuIuD48QL2pgv9iWIPhNsc298jG/AmhSqMfYSoAhK6S1ymOrv\nU15zVr3PqYzXr6aqqUuMRr4HKxG1JtRexqYvsmMplbsj7E7CxlR2h+8lanBz\nxbDhBOnJ6XqE4DETpgUhp139MYzlDzoXSiryxCXDHI0Elywn+w7iWC+XGkSg\nMvlhmX5omZNu4824HUbCmkR5+RnpcsLdjLAm2sg5H04LYXXqjbKPmeiR9Y1Q\ntneclX9bPWKWYZxRHksV4BjvfrlEk4fmh2DIa+w0FTOOMPp/itxJditi6UmY\nyMx02CfzZNSw7tuNGpNy1KDnRWgGSY1nXdNJ+SCT+Xofbz0HkphHVPGuh2QD\n8y6n82bljlxQ+IM8MIn1PDJfYy3HCU3znmeDxdw6a5+7cgXX4FCMSoXUlMFa\nhbcwsFNBnOyWSuFuiFLolliTiEcqg1V1jeXYnL630mfl034EBI3NHBsHscMk\nWCyglCH9iwK4rT3YGvAbxzrS+NUMc5JmuMzEHQJB5t7M9hEx4FIURAJNPs9a\nWZZU\r\n=tMpm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXUVuJPp7lo+BE1ghQ4sUaX6JTmnxLMLixQx+jyl22QgIhAMqjcQ+ugGOR8knnlFoWjT3Xxx89nb4ej1e0ostfhVak"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.5937f468.0_1604523939428_0.07434462172714795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.a9bafaee.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-circular-progress":"0.20.0-canary.a9bafaee.0","@material/theme":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jXBs83vpp9F4Ne/XjfbVSUWU5h+sHKvdeG0hcHPiYcgVUIem5DohzMNiYeNCD1mZBlcRAmZ45umK72MD3QVLbg==","shasum":"f028e5d9ca7578401ae89fe6d1ee1e0d0792d6de","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.a9bafaee.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0VCRA9TVsSAnZWagAAA10P/jZZ/ZAfXshaNECrIXXp\nKPNva2a9Xh5WzIGah+xna5vD8VQl+WyJsRsU9M4EbPeF/Yyh8IeZE0IUT/iS\nGk7UeAwBDvmhzTtwlvGzDwhmVrQsSGIOrmBbk/BhOYYbgdvktneoBK+Y8Zar\nClFV7yeI2bLZCjPTNxK9QvZhJlsGRghtgC2gPxU/091Rni2HBNxNLGZ5XLPN\nOto+il/eWchMZrxNCN5as9yprN6yL45flvY8KFx4SOlmGLEF80AU0A4wes0C\nSVDAHp0WUDkYmQrhCWROZbJr5sxNIt/twIHUdbxKPNLsTEp/Jk/bibIO+pRR\nZ/PPBh82xHT/0qHyUuH+U/qrXgq2yc3w+qjxQjO37SaLsYivexfhPUHYst+Y\nUlGYtVUTbSHGfcaVHoIOnIvG67XJRFPfQ+5G6nAb+3yXaU34mFMQvJXQ5bMA\ntDPen5G8VJOYNVzFVsFmVn5BXDKJ8M9TtZAHPGipr1N9E9u5qKTh8ZVjyLZj\n14B5FOakasmc+2rWu0JRmTRMRpFaJSlq/zIpC1Y2q9pkWruV4c2JHTzuvMTm\nhnLLEt7/TOGbp5SojCX5gAQMza4/QAmLhm4q2l9t2CE4+1mhuARDOa5psMIm\nkulKJJX/hYhuDcM5GjtHtxLZG84m4KtQDzOVnw4pWB9Y3kczex4n+JdrMPgi\nscYv\r\n=qxlD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPXkd+s29hedi9g58UuEWKeYXX9sOr90Sjn68ozNH7HwIgd59IwLNwF/4xhuHpNfsC6Ki8ChM/4OAIN5hdxOPbAU8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.a9bafaee.0_1604615444896_0.6214846651193442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.184861ee.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-circular-progress":"0.20.0-canary.184861ee.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kIeL0BuIVjjvKCjInoU9J520hJ1mjoG8MUP06JdtdCpNFMT7MtlCVEVk9r5SfVfYYGlDgsejk8jNqmS7X/hV5Q==","shasum":"2fd75fab3c9c0990ba17c520ca29da904e97d710","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.184861ee.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexTCRA9TVsSAnZWagAA3+oP/iIYu59O5ySGl7cbIb9z\nkXbfl6a4w/pTu1qmMwe1GFBU0m2nrtasyGJFtsoDJU3/zhwEgyu9jOlo18dD\nNNi1CXr3hNaJbt2O2zBkFWlyz5LIikpR9vNETZHA9cYQOB2Xb7+HpCf+Np6O\nfIMvD5K3HFO+4LNERgyQP+A/o09x3Mi/0vX636niRt3WM9S6KgFe5Bwi8uVw\nsAIT53lecuY/vv+20gZNaGRa/QKAcc+uMwLFy0oMDxBRY0cweImzR/QMdhCc\nrQD2ZUp0LGmmLvZ0AyomENlhsmEsuIBGwwHFKBALtK99tAa1D9VSWNl7obHo\nB1Q02/XBIFkJNIzVYhfynItzbL6HxSMVKGES/kjIdIn3BZfgdtLEVwAkPsyq\n4wBiV51A9EUcmc7vBEf4O9qQABuWxvIoH3GkPvSOS8NpkCOuw+qySamKRHx8\nFJx2ycp2XVbWHE2B1K9GCJFto5bbqqeCNXRU9ipjfTXWyHg1stgPA+qIjPjF\nG3l8vVoHD/phXH+BRSdsH8aVkP3Q+G0vszq6cGiQ3IW/jr1m391qD5RQ2pAR\nQINJOH+/ZJrgE9oQVy6JSI9jjgBHKOcd1Fbx6d/g5MznM2Q0mxdsNn2vbJRz\nEnc774ZCFfOSgbRnEfKkvoWJSPlPUIXRgT4QDOwLjOB0a88ddJxKY5I/NlKn\nbOjj\r\n=gKX+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICM7IgDXwET92mnp9q7+SxQd5l9Zc5mBAX7ooqlGZJTlAiA57xlCXKwcgWMiJ+XnH6rROoaTC4+c44ikkDZfi2YWmw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.184861ee.0_1604709459156_0.8369437779791067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-circular-progress":"0.20.0-canary.6c6ae2d6.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cHJraEsxxY8sNkJEtYFNNKBDHOMpH+DlbnGb+55TRFLo3EjNHA60a73mZuYQp4yCfZqYe1ySe5tHU8uQNzBmtw==","shasum":"b40972bc6ca7be74c45faaa74fa0e90f19bdc055","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6rCRA9TVsSAnZWagAAU7AQAJM4QihvMaB3AWXINsN4\n+nuTzSyIkpR1wFVIZrKNE4c4SQDekvYQDwtARk+ma/2CaPfhAhuZIgEc7A04\ng0QFP6C6fUm1LbxLGlYjKdVlvvf9CqkTMKsnUGAjWyOBSu8luSkgmEVMyUTP\nSm8QrzuUZg1c02EvgUAuSuBV83Q9cvjIuymo94h0UUT92aClFzUcEVw8x572\nXHebf25VoicjKV4HObAu6s5kT6Bg/tIg+ITgSEI9WjPgdclzUtv0pYZnw+19\n1iHBzAp1IWmk8YnRrn9pMl2KUl6xo52YmV7BDaYIrUOTgRfkWhM9mmHU8Khn\ngfDZO05okaDpeW/q84ch0TDSSZM4XJyuYFhf9MyIe9K7ni+faY5i2OPzH1+3\nO6ba+H8C9n6qAWFRWd1xzBdkJ6QnMKvRHVbPT+MJmuJroVZ9fdL7yCcvohyQ\nVn+vycF5uQlAeLxNdJpGUBLEVk960WgatRT1j5XZOvbMH7fZtCsfURiA1JEQ\nLtp2o9gNpPzsT+k1YSTcU3pO8eIDZltheJYQ9rVIUfqBe+3wsyg4vpGt1FL3\nx4M52NnjXyGnJgvmXsXGLswG2MEZ4rVBsHoRlnIYdROh3sdwaQGepDZgwSLR\nd/rMGZR1cjbHCVv6YkE6FCltK5r3WzQ6HLpYDGOH3PwarOqoee4lC6qkN58T\nVK2Y\r\n=9hn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtDQdk6SwG/E7vEw4vARZWAR3ZMPOz5qHW/sZWBwrGjAiBUhH4qqwtg3HYjrSpgzQKa00A3u8i9no9w8FGkCVpjrA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.6c6ae2d6.0_1604927147349_0.23936716603098884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.ea2aa477.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-circular-progress":"0.20.0-canary.ea2aa477.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AQbFT9x1H74XJ/HngMnnUN/gstxKpnODOOyc8I1bNpdVH7v4TvV72KYy2voPC8e1zZjNv61FJ0JsqN1rRzYmQA==","shasum":"f3586d825f38d0dcf6e3c1fbffff548d4c1c27ea","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.ea2aa477.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeFCRA9TVsSAnZWagAA7PIP/AtYbQrmkER/+u/FdFXL\nWcJ/m5oSMDU2KxvbBjO+eKVdNkonvfnlWsAyMLPDYyvCMiXRH5sL+wJev7zo\neOeSjU+2lKorcq8hkM6ZfHR6+JyjESOq5B+Ym6EqNI2f0kJ3xWxUummR/1yz\nU+idFqA4a2VtDfQ+jClYXyWxoPkLVueVo7KMnLtUBwcvoAbSSZ3joDRFM8+q\nN7RUGPwtPkt/HT4yHAT3+T+6t1P6dhy4F+hf+ct4GytjbyaTgul5DNLG+MlI\nrsFLQZAH0elQkDpE8b3H1gDkWbhJc8bTQIhq42AnKWcApxpVunNinbIwIsT/\nmEWEfDS4JHS8jZGpPrxz1HySmP4VDqk9Mpny4otA5rotHGmAHNx0tPnKY6Fb\nwOJjGeLnsOqVYbDFbp2zfZV5NljR1r3LKkezOR+rmulZMKcMHEhxHXRTIjDC\n9dUXXoexYhcyVLBjyTv383Fo5tqkrx9S82dqdc+7VVwZU0hYNw1kod6WTOqE\n5tcLsXjbNw3oUgtcffOImS5+M2laYqMf4jZnhtNP+L1B/DMJZU9VwNT7cq1k\nz29IbjBI17sKuw3auWZ4U8DQhO6149ts2XJHQqGqckUrHMURPlFphT6D7qu2\n13DsiZqD4MGZf+TrmidP72caNINl0fHb1zwndpsgildKrrUQwhArdn+Gt4mE\n1pIp\r\n=fbCu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeV3iwAk8/WKWwnyfjPtNkjKIYunk+1Jv5112QbjlDPAiEA2wU7/zQu7KMciHStt1pupsbkG32VlK3LgjOvUIDkg/g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.ea2aa477.0_1604966277424_0.28763764643141765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.a2c088dc.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-circular-progress":"0.20.0-canary.a2c088dc.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-b8HGoIITFADDnVm4oNEMtLDFUSIdmqabZkRn+HesyHufCOgys90JrAVigiQtnNrbzOS2S0sFquAvQYul1gLrlQ==","shasum":"ab06914dd87916711b329df40af056c24c1a7be7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.a2c088dc.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKDCRA9TVsSAnZWagAAVAEQAI7wzfUJcMHweeUdFD9G\nPdCS9UEtE6r1NLa2XJzQT+Kcntu8yqv/Paa8XtC5hlj7vhHtq2GZvgLEJfXJ\nPG8NR/yCWUuDt001rKjfMo2mXAUc3WXiXxPdjVhmtoY1DbEYE8Ny640NvPZ7\ngUWj0RFribYluaLIHfhmF0YrhE7zE1QQADDzX2ki+a/UijVgKSncA5ZjT9ge\nZESeHAwGKLbKsXR/hONf2EzTM0skUl6ItVnr/NjfFDJFdw0Fwy++HZkBQgJH\njl3q2ghc8Ry4CSHXwfdyW7jEhfgKPZDpf1sx0hXkOguWtpWHS/1p2SXnau4g\nL3PnYDxiyG63m4T0QpNTYunhoFDZd8aU6md6cPyN+XaFrRRy8zmzZH/Ag0CA\nltEH26IMxBPdrl2mqCXAEIO4YJBP8HjJPwpjdQPpdzrhGgO5u11Gs7c1TP1f\nES3bGoPImHcxZVM5E/hL4ksRX/dutuHz+iB0Fqio69hk0OzEKQaVp7xrs0TN\nNboKSN70k3YB/aOLCJFrrg4a+AP4MteQocqI0DmdERYMBVoyv+FdAo0Fp0yR\ntwPaHKnLMud4bnRoZKyJIid6cWes34cU04Dzx3hyt4835LXUF9a4+yQtQgF1\nRfl8sXwhW40imMKBHSZZK9umpeHp1q7YgcvMjbE3B+OOCMML1YHcKszs/x1g\nNVxA\r\n=z2mV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWbyNC/wptBP8dWazKl9YYRc3ZzVqRQBG09kaS3O9HWAiAemKIMl9NkEsR78yF1WUKKpTEzqTRRUvmnvDOhA2nG7g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.a2c088dc.0_1605018242674_0.5152544531311241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.b04d71d4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-circular-progress":"0.20.0-canary.b04d71d4.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SCX59V1V4Jhi34zQZRW0wkZlEfo1r5iySkaWNPYAXAgjYVqvVN8/xdfwbtYasESW16o1bu5J5/6ZCKRxPVmLMQ==","shasum":"c6971c27483be198291f8637981bac55bd20ed3d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.b04d71d4.0.tgz","fileCount":16,"unpackedSize":42749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRF3CRA9TVsSAnZWagAADKUP/2ijHMc32RcUAa2kh4k/\nLeCUbkR64WHOXCUarSjVBQkmTOqGKHDy5DHPsEmRBnQhtSemC8c1Q91CRrQR\nthFwYB8RKyj8JOvUd17WWQeuA41SE7khsPuJ9aqTbwKfAn/XeM9+83kJDrQh\nypcuyZc520a55xYHvlogFaR2nXJc1RtB6aH4KcL4uJXO7weXqKadBpuYKI3k\nQwfdi6X+03PbGTCuOFf9NzpJ2oB/EiLS6tiAtv6hEeBLOFJke6vUZkiPCsXv\nZcWwSYVDKz/huxLVxzhXItH8KJkUwZkwlmEyS1ahF1L4MyCcPOXb7dGC3dls\nX6GoQFKQ5HhfJO5+C7T3dg+icHYkfp/GgoZAhAOAY+zaH4otUQ+/Jc91W3+l\n/q2f6kN+19cbiNP0MTsSplkEkPHeX0+/2Rmy/VOxtAj5P5DgD1NvWeteIkBX\nbkGr55Bai0hpVFazeIMKqLtEg6cD6EcsF1kRrSH/WWRyC+vZfJvvJGNoHiDd\ngv2TlQaJlBNutBfkNTxFUHnGazyNUHsHzZM7ZGwJ0QMQvCwu8qiAcoSpvCLJ\n2ONj2ofZkvBE3cBYQ3kV47LVsE1xYDAtCbchD7KSh8wbVm5O7nGX3XDrs8YB\ny2ChxQF6OB91mPUF0A0mlJBYBdFXpkTuNF+Gl6xnBsqXRstMQ+Jf3sBj8gye\noJ3l\r\n=3W2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBb7uyRDT3D20WCdeWx05DkzDFEdCSHa0k7Ob1MYt4q7AiEA8TbKE//zxv8UW+s6Utw8uEJGcUeiIwlAIHxHshP/UvU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.b04d71d4.0_1605177718708_0.8069654678742095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.2c553352.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-circular-progress":"0.20.0-canary.2c553352.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vrk0l5PLy8X7pS6KLtsxBKHQez7q/TB9TjDupBAOhyNX4iGwBQDUlnfbX0YpReTDoxvQrlahSfe/KsgQ/c1meQ==","shasum":"a8f49262809360afa7e53cf88c1bd9aa23876514","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.2c553352.0.tgz","fileCount":16,"unpackedSize":42748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpiCRA9TVsSAnZWagAA/CAP/R9nP08Gd6t4aY9TTQby\n04ZHcg4F2w1ihXoBhqPqNc02sTAa5EknzJjAYjuA8oUNnBNYF/YE7wudyFdL\n2p5+D9D+ToBqNy5leTqquBg/kW30PBzhds+w6Bj1ZW27YGIa4kOVX2miLx3/\nuPrnWFrp3feZkkQHLjq4GmG2WtT/mR/GMZCkNST9y9kyBA2ZGWG+96U+HHeF\n87ojM9R6KmMWvlbvlclcxO+ZrHEAqqxSmH0b78Zx4yfTCtPSuO8QiHtuVfOg\nMd4hwt1/JCdQHHxUB217sIs2l+0FYyyvUnc8Quqd3nQsQbf4P6GfvfmbuIAr\nyQyBklucHsptYEBXyPUUNU2ZJrfyguETQJ2xXOa0wHq2J0bubDtXD313QbNw\nVbcZbJl2DwGcQGpn4NlkYPRXFeKR5nzYTHN4Rn6QtlYbrKsYjT+uPzpS64X0\nToERqtDPM1XeXS5HzhzpznL8g0lv2N4/bt3bqw1I9XoPCGCHqgvnHIS8295w\nySgJAWSoG6y6aQ5myiVqCVwrffOjV3aDO0ISGt00/wSQpSApjtbQz/ZH5XfQ\ndx9r2C/tJuxmUHn5hTwoOZZJMCNmh4rVwW1Bp64PpiUadVVbznXGUBdXxtRr\nkVTycP1Pj1qyzHjac3CicQpwqVzj2+1Iy0KnapjXS/BkQIxxJShrgC8yLG0i\nDLsD\r\n=SRfF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrjW5x4mBgwI11xxDkvKgXKHpxIr6+XHnRDKe8WtmiVQIgGyCsP6Yim7RKaxex0jEaQuI5O3JETok1hRf58QWWZhc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.2c553352.0_1605220962466_0.9977273384528291"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.6560d19a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-circular-progress":"0.20.0-canary.6560d19a.0","@material/theme":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-is+E0AhCkQHTrxtlWKS8ivqR3KFBYzuW7iyEm7cE/m+7tA3OgrgGtWlTxsnbelcliKEr3WOKdIgW8au5cjePew==","shasum":"1d38d21fe30a048a96f5070463f7d3e958f6b158","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.6560d19a.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEXCRA9TVsSAnZWagAA1LIQAIDeeQCaTLIcZAP2jxEx\nyiAUi6iIdEJ2sRdhxcGLpZIjnDCZRpWljmHSQjOPE7BYfYo9wngIVphA2tC6\n6iNzBUGao5wGq9roGfC3c+0PSAor2qwMekRS4O8qlkVDsYRyYZSvCbbfO7/B\nj/UhyFaWvQpakzC3GWGpPJ3VR0lS+eA+ee3hLYY3FaMWXzEsTCKwsomuFVtu\nSUK/EtiVZvUlkT+jXO97Y1psuqnBRrzY9ZtEPp9wIpHXTne9UyfwX6z5SHyb\nN2VDwGfyHxuynFHi2haCHjY8f2IgDOhef5z5rGx5GkniWe37RPtNdiMgPFUJ\n3Nsbxrg+Lmk9o4SOLA0scT5Ov8oxcZ+R6pfwlfAaQ0s5Q3ikDoagzWLkn7Xf\nG48jNXH46F9cZbuDU3jOLj56WCRFr3poVIT5ErG9h1gYg6zJhECWH+1H0uEQ\n/dCLl9JsJVJOcANrnNfAc++qK5m8c4IXTHkIILsg0UHsYYgz7wvazSfKegaY\nI/Lx/ZY0Wv1UUS3MAhXJG+NjxYTKORzgC7QtDgQ9IdT+1v/qiEyeEs21Ijs9\n/VfYMDBQUEtZTOx/YyWc3dnPVkeOZvyelQU3O7C0JSxnbKaLFFRKAzql86m+\nlygfvX8qXssKgQHbj0PKr4cht9QsAGSqmbEiswFT+WIAOQg5XR8pbtL8/4Gf\niKdG\r\n=4gah\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHxWGyKesohHGw4ZJLawWwfmoUj3sBwF1wwOzJdgt8DAiEA8apRxL9o7aXl1KNzR/eGsKO2sbzZpHBJ9yO1cyWiiIQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.6560d19a.0_1605300503162_0.5050176748932207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-circular-progress":"0.20.0-canary.a28d5ec3.0","@material/theme":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-H3vzydfqmT9H2aQbxe+fB47MCF/+1wNUlrT7c+joYTJmpI4w7scNx5LhDXN0XOK8+v6tOx6xmCIifoWPjrmuTg==","shasum":"ef2a3e699f1a49595c4712a4f72c94ab7a528e38","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.a28d5ec3.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+sICRA9TVsSAnZWagAAW2kP/j+9Fhs301bOXLfW2LUD\nsCzaw6f5gVgkhWAxcUieuqYi4CvuH7Pj79WeRP/A0GQijJ0U68AgGfHxnnS5\nnRfsbB+2TdQMcYQc/xDp7MzSBMf2sktQ49q3p3FJksUUWBF8NrnBiJSz15sx\nPM7vEY7lzeYP4itzHBOnCcCcRVT7kR/iSl9KQ4csk62HQV8MZvuCGvnkbbhG\njRjoT+33ufNChw0V73awYUha5uDsIy6vlZNMcRoSVnJ1ji31bIpZFusJ/LAD\nP/Vt+vD7Q1z1Je/hV9BsAPgtwE4XxVQLw8TpFfQ0DDOsozxw17dulXAsZqIf\n8PL6gEcwhdSWrO0VHQX9+tlHd4qDmVyzOF5DwfgBYXyZeN7HT0rDiOupD+2v\nZ00ZaW+JO3aPcKBGelPprFefzZzJmQS5mOLF7G9H2nCMOPyvOkdyHTboj1sJ\n3RJ+Ki05WejjYPuej1HR1YVWsrLHIq0Z3lUgHs9e0J0wttT0zQCs7Y6Z/6Is\nDXKdfi6uZlnXVfwtsHmyxoDGI8fqajtL2amloYW6BKEVmIg4W/VJXhQosWT+\n3T6jNsSFNimMxSeRZ3cYGXTyY1TqFxmBKR1euQcnjnIitahC+Ab+So1WJbHs\nKONr0rIl7ZcWamVJkJFZmWMPK9ly+hmdUWgShp9cEqhrOYqYHMuZYPArI+Vq\niMdy\r\n=Ik+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPx8oMs90FOfmdPorrqkbnNqZ8aoIbXqo7XrCTW3AjpAIgZOSV/21UxDML1KjWvmdtw/tM+wIK822B4uHT3TGH3c0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.a28d5ec3.0_1605626632156_0.6673517506909237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.03e7e778.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-circular-progress":"0.20.0-canary.03e7e778.0","@material/theme":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bR6S9aaYHJKLlEDYcvFe8FfUDfkCt1SHB+ZK93YzU3WU4iv9Xs5UKX/inSTpGkuHq0EL24MelZ8/mlQUZq+zHQ==","shasum":"2cd9b3123c51add42b231e3aa1433801c977fabf","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.03e7e778.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCO9CRA9TVsSAnZWagAAXqEP/jmMySkMCfKjwTIKf40T\nKlB+dZoPeazGFC2gCaiMGFGb3RLJLx7qDsdfA1/fFSZLq08SOm9XkKZNg65X\nIR2Ycy/AyW/Sbe8bIqW4J3gw3Ac8nhmm+70TZAmDpjiAzo9qIk0dplZXxqXy\nKlWA2IwCfg3MAvXV0ufHXmI2PmgP/vvcoFdh2H6ciMmCaCNB0oz6rWwGyAl2\nBX0uoQXNAS3S4zz0pc3qpZ6Jlv11d6MgGpsGLiC+pQM+3d6BUpxvsYKTKcEi\nJMBhSLbkg4q6JEXpKnXcSkUM7Z2C4+Csp2DRk4I2zH4V/QME3nQZ67CYnlQE\npo8KFKrAzGMnQ4wGcgw/gV2wCkveCmThGCNGNPB6flJP5d1+H5wji/HImhdu\nC/5a94Zt1MN5fYS04hptUPSgKQAV7p5hZ1DVfyjKfyaalH0tkDmSqGB837lE\nWR3SuZHdxDNbZqkZRzPYJQFGg+sd14pzSlxQnLGHDOBZqWrPS50Wo/M9H0LU\nIoC2uT4pz2DbqspYMFkneBK0mwinfA/1QBR3Gt5SaPy5h3y5hw9kBaA+BTJe\nhl6nDA1v0q9BqoKQ1MlVSqU7o5/C1JTv5isRZ9Xl3uxIygpy8EL4LLghmwJ1\n44ODShCuaX1FkhFU2cLwdkPXkFjSf3lyv7INPy8nL38gvRsryVle76zV2gPk\nFSBZ\r\n=bX8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg2aNJEBPbOyD5bYLIEleISkTc9uekQfvdp27Z0pKLUgIgPuSlNQwC+E9icARLY6YjDHLE0YUV6T7/H/4JM8J1ReQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.03e7e778.0_1605641148791_0.16078939776950452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.ac8ed597.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-circular-progress":"0.20.0-canary.ac8ed597.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-frRuTBkxKV4RVk1liokS9ERU+xeHfjRvUkQxLHp5a3oeHcK5RvFwHisxsZIEeu/EIyHM8Y09NE0PJqvBl/fYCA==","shasum":"1c5190f4ff349963632653f8acdfff1dfcd6a2d0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.ac8ed597.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqeCRA9TVsSAnZWagAAQSoQAJyTiClruh+wOiHuMqre\nLUHKyIj4spaHzu9urIBgLIfiiOzQYDF2bIyHTqWgo+lISZfa5UQXjTk9GhHW\n1ek9nXp7RPCyxiVlro4Z9kfatBN6RxPt+bl9CrrNXJSiZ47ykIi+TIJFtEWT\ncqgXqvVFAIi0/DBTwRuH2Ajj3dCc8uVkVB1qTdrQYto7/fU/0IOMwftQeNAu\nvJ8ou3B5IWRrjQTAFyhdNOY4ZR4hZxg4X6CPUb5t8Te6c/KuHQAWz/L4K2Pz\nfkvOMRyk7/dTMvdfVHxaV8nn6m8eNg4uuxO10LKpKTFPghIRTYY5DsmY5C2C\n7UxUQDtKfpN28p1lwK9RHH96nh2nOITDvwa2aekkqlIbEXmMKZMA2y9akaBd\nWWu4YlduU+zfasAsaLO1ZRQbeIYcaccWZfgjTs2rmVdK0diGM7hsttpdLnGo\nssSqYj1k0jEKg348vSfptUB+hsIZ0bREXekWl66y4BiV+iNxwV4NqqH4Lrc/\nPUJju9bGpy0uKpjNR/f4hnXtWoiblWFyN8pSbW+Pg1wvMvMLk9dtFdWjF394\nlCvYyC9rBH+mv+74e6ijcYmH94QCMh7JCegZ7LUjotFpH1pMRty/HpH1VgpS\nrZRQrbP3FSZSW9eOlxNzakoLMlkufY0PS/ooILnsvPcircq5SYC/BFvVs/3N\ng/ux\r\n=k8qn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESaUcTnfZKFz7iHZ3t11v6te1A8r1Ti9CK3xDZAO2myAiABdvTL1aYYYx6FiN1pkKalaqWZwpZmbg9QE+sIYNq/vg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.ac8ed597.0_1605651101968_0.13539778340846587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.b6a60f60.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-circular-progress":"0.20.0-canary.b6a60f60.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OyWE4F0By952kP/HntubWyG6Q1CcbVKS+BiTlZbziDlhVBHbS4ICqzFac02x472axUXgHPjmXxd7K4+tWWEDUw==","shasum":"8d6424986b31f115d8b6424343f87cbd4d172579","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.b6a60f60.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQVCRA9TVsSAnZWagAAgkgP/jj3bkx8VeQndHNQrLvg\nlVznahcsjMQpGtXXtePuyxe/DaoLLwHcQHtFkbPa8JceAI9I3JEP8NxBjCbb\nV+7sUEJzI7/igAUx2pG9bXadd/dsNp4mjzp5uFs0pfb2tORrb7YqDVCPK444\nzVFwvlwXGR/Sshlpvqlyd6nUtl+0RFRUxZ6x/0rVdZX0Jgkakor/xpVS47QK\nbkwbcatjqDNZ1EK0hDlapMUk1QTLMkOSYigWhIZAz3nbuWEzXOrRjiJ271o3\nJllwXtyf65TFmUiAuiCbyrqXUIQTICMx7oX1ETmh0WIh+jvG9b5zuqSCtUwW\naN7V9p/Ia1vfGveKaLASn9UVLvZxJreD3BihpsEcZMjau5dItIJd/G+ebXvm\nlxmwUuakD8qd5xB8Awd0NpWj62HvVJ3SJv0Z7f+ElcWRodn1Fh2/0WX7j+No\nTaBdMlSQpmnghqYkwzOIBrRS09/dr8FpqzEpkVTfYmxg72dDJ4IZEMWArtNO\nmH202edxqOBFP4yRuFk0AP3cNB2m20Sr2jKPbQUfV3mlMgeL0UwwaTc+HoFW\n9xYIrGutvp0YWvhepsZD6siN98DwkUjKu0n+QL5GLsrFtpWeWc/2wOUfdxe0\nrQLtP9wVUAoQKHsZInsRMxtPjvXU2kwiKZXoX46MuPTL6R6kQsqMCuqjGPbF\ns9CM\r\n=Vzzl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvzcd76zpDmHbOupaykI1kxibimlvun9e5vCkIdx8f7AiBhkRcdRF0V/L8OW8wP2EHT1HwCfWJ0/cEHI3Ob46h/4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.b6a60f60.0_1605653524645_0.01131011322565012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.71cc24fb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-circular-progress":"0.20.0-canary.71cc24fb.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TcLZdufFG8zdF7MQp/7og99Bh0Btk2ZTBy78L1LBXi+htlmWYzDG0xo2xu82IPC15HZtWNJZbMHu6F7d1lfiJQ==","shasum":"54707d12b13beb482fbabb04eda84d1825bdfac1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.71cc24fb.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnWCRA9TVsSAnZWagAA0VgP/0qXhmayqlGv9GiYxViN\nTsd5f8ShmiMDEFekEF+yY4DgIpkqFPkSNtt+R66rkMFZ5d2zsODyUcm8A+B6\njbdHtLbx208HPv0X7/wLmbtelPR+Tw//9UsFZd6LUMkoReGex0Vwq+eswC46\nmIZZ1RqbLxfV6GLhQlsR94ct+km+p3WH6VyfDJm9T0T3ZXf62jOyZkDdMj2z\nenfEyMJyr6hf4ZN/DHtNlKibGAhQ4hoL9l6LVOmVmxaAQ4iHOjGoF8KB0QXM\n0sue/GJV10MtuEIwX8eami3s/FwdH1qzIJ70o4fLwWwKnHksiTcs6c2Lswrh\naAM6tDaV/sG+3cYCCLALDo4CMlv1s/4EPNvbjt7UujRjWXILrZ0DHJ7EW7j2\nhDMRYMKAlzdXruvjEjfjbtFzKP1piljtIyYNkLFp6sP/SCt7UVhdcLYDqcy9\nlDbaBnjI9RgfOLn1WIuvj9fDe9+1LEPlQAG18/UMwAt5aPkN7swyGErUxVLf\nOvoa7wJ92nri5K+zk/rIwcY6r8T1D5hIuBP69j71K30iHJqL1A2UyTUs+B+2\nROp/nGPc7YYDo2j2WbuHKgu0fjKexw6+JDkoE9MiXm4JIj7rq46DgGHn7py0\nHfKRxTj5gDRs3o8eEhUa2bb/6vIGvF8Rjw11T4aKm3Rpt+kOrwmZgFjz04eW\ntA0V\r\n=PIjd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD83i6hpZY5N4eK2BjZa+Slhesy6K6k3IFdSyTzKCyBGAIhAMSUiaVbANfFp0ii813V0vXgEiy3jDMh/HEW+3Lmhh49"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.71cc24fb.0_1605654997907_0.09192762150767697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.761027ff.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-circular-progress":"0.20.0-canary.761027ff.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-u398GJ3XoyiUtRVjjtebGVhlMCF/RJotw9FX4eSUSoqRc4Q90xOLGspvnDo7ubmMjIOvNEyzKvZkaVrrazg9jg==","shasum":"524026e5eb0ec263e29d9cf67d7fb50ab39dd89e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.761027ff.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZylCRA9TVsSAnZWagAAMr4P/Rcx0qCutMZ6mbjgrwQc\n7e8w6m/KeUdAglme4GY5v7F7JRzhJSOtmiDHBjyoTN8Egsd618CAkcswVt2H\ng4rdYrNtxJQbq/Gew+yjuaxD9jg9rKogK+3jpQg8EknrWrO/KVTGU5YfPEUz\nUJ/zJCYQ8gOJM7AlDLMiIZtbl53GPVov1lTmP+stj9grdLi0bV7kwQ8qI+zg\nSHOASxFnuj5aQjNcqM7QU/yiLqAmYXMwU0MyR3ArzcBJZRdUdgHCKNHwDEa9\nCQsow5DL2/KlLrqaMcRqCFncTxGh1eQnN9RT9bXxxFeLCPJOc/+t+brcBs0P\nA6S36oqnGXqqQngaQkpODXPyNhIbmIdjp/VCCkBWJqhDMDDGz2/higD+a4CX\n+1Vq0+swTIHkyBjfCQIZPR3gFNzVspK5PgkkqxbZgUbTaaWVIUUYABcrVRcz\nryFUtlU/VDt9rm1XkAggkldTJmlRkz0+7ZhWlAmfGj0QFsnNxFedUsNr5dWO\nIT+IGlE2d9LAETo1WEGsD296mOI/hJGgOjTW0gWe4XfVE6dP8pay1+KaaYNp\nhHnjHXiwQ0GqGCYj2I3WJnCAKw2OtkgSGTdl5aZPAAsA7fHitgWFfy/f6ArH\nFkszzVrGdk+xlHPa0N/g1FzDlXN2534esCp7eSTzaqWygoStf/7fT+WkvTj7\nmzul\r\n=eQk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXAHiXkW/0jLi/S3bQllLYinEYZrO7B+f54ubdQtU7egIgWj2a2o/B2P+pigMZcIkSQ4qtY3D7/GCdz9hgcTIiwow="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.761027ff.0_1605737636637_0.18878440641485783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.dc93d04c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-circular-progress":"0.20.0-canary.dc93d04c.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-op0B7e0AzgXTBrfDyg51uTwDWI922pwmPEcRtSgvaSUmLh/ZcALSchoi3MUddzCNC0G6FAH6SPWWOnHW/K8AFw==","shasum":"e935d48489e8c8276d5ec29ebfe582e156468d94","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.dc93d04c.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4GCRA9TVsSAnZWagAAgRgP/AznMPrI9ySQeM4Qw5Un\nW1+4GMr1dVPTy3AIRij0bZ03ZPaPsCI9ncnE1xTc4iwDz2zva4uxQv79GbYc\nwvKi+dkS+gt/J+un8+2QLfsUr6UnS4FMCb0ezwVU816kha4ekQacmPC4E/QF\nsKqg59tMDWw6kHmnUDYjdmxjkT2lo/CmYMlBfkLOsZL8ShyV3RUpc1FXhogq\na/D8IwPXxhW6+vQ8tSRSjJ58d3dG3rIl4kFkHE8ebfgX+3EY/wmBSK78Mr40\nd5R73J6vCAKklte9tCsJj20IdPRK+JqsQLHoa138XPiXnyNP3bl8MI7mPet2\nO4H0FYCn4phPxhvsyjwmPfhZsSHnPkpDp6Xag2WIEC5fx+DzzxRnEIAvgROd\nXvzxuBtklVD4WInTiliXkHV8df5mlTZLe/8PAjn5INAh57XjOrfmH7HfWNsx\nOpCLTDkgtCtdL7+xnertxro59DbLuDpfiykp+dafM7IC1Ep8hUyr56nqQbnK\nvrbSV0MAavfsYY4W73f9orCLEyKn6h9hG8MAyMZJdCXqUFDe8wsdtHcITOdJ\n84kZaPd9/cBx4uc8itLAwEvRWno/93A+6RycKI+RFuv4H75w+P0Q+3OJwX8c\nb/HUkjFyv0YSxVYn/IpUrU10ISxzsF6G7ASgOMCQyRa6WwMIi+lk1emSsyti\nWp/x\r\n=3g2D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8NuEisn3V4o3hILQou3DfTDjv9A0aDQos/ULE4A+oiAiA1KFZcnfy4fDVMtZ7tyr5VsgwSRbltxRQkQ3IUWhMk0A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.dc93d04c.0_1605737989580_0.21723294224778877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-circular-progress":"0.20.0-canary.4a5d4eeb.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-i6LWAVulLCzKvIE2J/oEz1iipHYG5FClnJ+K6RF+0MjypQPNR3MGqnlrnAzGpK1kGaZkafUsVto+ZcVyRSOdUA==","shasum":"92660a07a3fb24e0c8a0d3bb521dea9984ec25fd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldYCRA9TVsSAnZWagAAg20P+QDdssAiOI7sU4Au9bpH\nxW3vzN2jWv/2kTMWY/sNgk44MUwjrnBhdN1NblFhl1R1BysBQnHFyhPTcA/9\nG8JkGxvbhe5iPe4LIOZ3BbEpDU0EcEsmUVeNDVbjC/iRbqDKPtkqqgEqmzEQ\npJ0nPXIPT0ilq3ma781ZX9lPdSUj099oXEpOx8mMUDh1/SUiphiUZlZ2MA4p\n5AK0ZONgh58hId29Mxaz/AcPh/2iYZvLWi5CtrkrubY9rrgk4vV6BLs6SRMG\nEuVQDKebM0CTTOjR7kzCak9eHN/lgR6GBL1ysJH2iyXiG7bxvtxnW8VnWEk6\nVnt9GQifQZwOSbDi8QYizcMzBs3MtHE/ybUHbHvDmMGWOyG6y879OHlhS76y\neovSFxEfp76yIQL9Hcs9QAy95r11vcyqow0TyZaDwbxvkwZGQiX8AbpiF+Fu\nTA8c7q7acA0RkS3yXKKQ9PXMVd3k25Qg/byeUysxb/tONfE0Yx7gJMhey/R2\nxC65mDY1jlaj6Cj7QtuV0KMkqrDRRlMJLdhdnUTSU9vdh+QGYql7I1mJ0H6D\nuBFmusfkXE84Pchkbolg/omwfsmACzji5GHrUZUwBYiHILYwSZYvmGenPC4Z\nnrreE96G/FUKJUNtFJcW8lrO5EzuCQQvEPMjxT0IWsmf7o4qmz2SqyWYaT75\nFHDC\r\n=aJ9t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiT+OPqB8bm7YB9JbDoiBhKgFN/RiNoJIoJfw6GXsySAIgfyIg7AGhDCoZL5Cik95phjkkse4WVTFNHl334ax+J4Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.4a5d4eeb.0_1605785431598_0.3535517171531646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.bd176a15.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-circular-progress":"0.20.0-canary.bd176a15.0","@material/theme":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qUmyTxfsSNMeaGlC4x0a/dgMpBJf677VjLSoT82Twje5Pn9axWDBvZ1bitSnmRKiGLyt01rOa2u4R6+2H6eEUA==","shasum":"0e8026c27fc59e40f71606f50cdf2ba408352cad","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.bd176a15.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMVCRA9TVsSAnZWagAAC2AP/3WyPCK60JeEJ/bK4oQ/\niNk3KaUsGdk6NYgAEZihX033d2pswSK66q0d5gCiYTOmn27dhkR42AS8qqMH\n4lINBEZWaPbUPw9nHvDLue7hl3asidYNzUAMo984Orqx7ziQDp+Z0vURGhnB\nclHGdwFsG5IPajQ94VQB96enZ0GstbDo62S6n5PDvAZyM7kDDzKu+GAOIpkC\nqvSbSJs3tRVhFaPXMvyzz0FYamtuUi8yaEi9M7h6+yT7WnLLtQHfblMQ/gbk\nktUfkeSk56zZ5qj8w7PWeec42jiBblAJPbTHxnX+jXaRZ2crCYQmqP/ij73G\nMZ7yPnJXHq2KfbffnDFtNo+z0tvfZKCUK39B8E7NQzTgvh8KPRHg0Q1SwOxs\nTux4XJncMWdooSD0k4ONGPGTrnPDnzdmydmMPeQEzrEli2w/XDu2kuAdrvsE\nlkYR1qTVq646vQPiwM+4SfirM7Yc8dXYWu1cyjmYWNl+bq0HUzv5v7ElNarC\nPy7vNtiLcwehGrQRFrq7riJuIciwTc5K8NLDi/wGZjByF8DF4b6OkTkRt1Go\npONGxk6XxrSNXuB3+4NjqgtcrIffX+FJSDFg7M4G+/ZgEyNsTEcEllOCo8kR\nqJ9roTE0//But8EcMgR/g/+DDeJ0fnW/pPDl+3ndpGLfXaATx3j162QTmRT4\nwFgI\r\n=PP72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDY7x0oPnLvmQ6BUV/VlMa0CHLfIY+QzeVH1EIySF1CYAiB1BacHGpoiie/2oWuR9bneBqsHvFpikQzA4USPP6y6CQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.bd176a15.0_1605813013092_0.7992221677105491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.e85aa60d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-circular-progress":"0.20.0-canary.e85aa60d.0","@material/theme":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UvrQY8y98nUDK4TRCvJG/L7L77CeKN4FXDuPlytyKOLXttC9oJKGrwyVcGBNYzI7Ox3WJfG/cuePV5SgW5SJSA==","shasum":"f03f949330d99ff83675750ae3b360269a67339d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.e85aa60d.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDagCRA9TVsSAnZWagAA3kQP/RisEMbTHBsCZ2If9OdA\nFtHU1hsuwgAYVqwdtnq0u1JLXGlfkKWkI36hHMIvYYj+Ag/tt2aBxUYSwVsG\nIf+b+wnk8F27XZVS40EuN636cq0VrVRodwgxUDXA/6afkpZ6fnhp6PW8GTJj\n/bpbcgnokQzKpRP0FOTmNgT2iOWwO2taGR9DUU5wLdPyV/ce50B7X9C6AEvR\n01bTjQB5xnQgtNFkmUNxpdsh1AbPD0gBj2p3UAbspgOH4kklFkTaoOQdZpW7\n27/F6Mo28qcI+hGZUxOA6d85634S33JpUJ+EnTsjTbJd6fWKOhmHCStA+1jn\nAdUqgb7LsAE+IzQ+HCTID9LY4Kfez3HI4yUGeQs1rofTymYvlLURbVTGay73\nKP0spILgSyFVH3r5ygT/8pXLCZwRc2LWCQE47ofHm7uyE9GfDqPkRFMflYNq\npTu0XGq9GqtyZTXNPdLZDpfWGw2f/8l/W+26WBSD1K1YP6gCclKKGkq59Jp5\nv1a7R56n96XL0/RL61x5A05fFttQHk+kNX+gAStZqC78+Pg9d5+ft3sBkXua\nWf2Omfl7ARPBYgbenXTHP5+4QARWNJNStfKlSlf0d8TGLu6j9h86hnG+p2MH\ny6wipKfeVip+206k0ateeRJTnr5UkHMjASYx2Qun2O9XTrdNtO13CwbCbcMU\nNjlZ\r\n=VB/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4sC+IxgIm/815j8EpdplatoT1hH6kVhsZkGN14VGpigIgJF7actjWZ5d233LCHIwm9egu0Elu/Hy2UWnk5siulVM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.e85aa60d.0_1606170271710_0.6257836791993998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.72092360.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-circular-progress":"0.20.0-canary.72092360.0","@material/theme":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7pMPlHMvBCWsucUim/l5xcoEFB5rPMfsh5EPV2x8EmCEVB7V1aabdcyWUA48PYAN9qNL79LsPDCs1fX8xQZiYg==","shasum":"cb094e284b4f89231312c999c127fb9a3e820155","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.72092360.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIl9CRA9TVsSAnZWagAAqrAP/j/IeeL9c/v6EJkPHvWT\n2gF18nXw7VbWzOwhcXVTXrM5wUwhX2L+bmUkWLtGV/MUJXymqhE69zyKqg3D\nlGCsYHu68/n317smkhnvUgVuRXnhUYOIVr/NMLjQd6T2h/1TnomvlgKiawst\n8X8Uu9scujJEl3br/HtzGSgfQJbt2eVAUesTgpyN6PIK4RPiD2nXHYfMoHdK\noY85FaOR4e4jgX5voixIA0g4sDw66fW9gM9/DW/g0+FFx9ggN+EnbvZ0i88U\nBOoY57HhWxsUisKNTavsk3nubLoWSOBmjbOK8ZKMHTUY+apPkkDIxmbibRmc\nWrshuY+vrmsbMn4tM/4xLdkl0cOX9j+taOM9LZ+Dn8MuGiWductdG4N9ody2\nwwzpJ5q453Sjr0njAjiqtVtlLQOhi8K5myAF6Umr42xT19VCI2hmOFC9EeUz\nTKmfAxogAmWH+pjMoKRQNS82+MuQUHrgFvCw/IWnrXGDjHs0PTot9slbUp//\nXZsm3r3vI+J0HF5VOcbm6Oqu4lKLsqkO0+SD0TEWFAeI0tIYkOZrWAPlLw26\nWSgoh9XjPqDuj/B+4vfdYyAoGV0VnF93IX3hFAOunLw2xQANtK+V+jZviLzh\nwKOrBfc6TKzXqxWPm97mlFJf+xq8qPCW85BO7+CCpwT9/r7SRInpOMI2ATZE\nfjqf\r\n=YX1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC009yznHGkFCLS+GzDN+hjaLWcdnDBlLRpcdjfCwXytQIhAIP2m5eZXZrmTzYNVkWdTWJ9od0URCaJPZJv01giHzEk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.72092360.0_1606191485040_0.4513860869439519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.baf9d39f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-circular-progress":"0.20.0-canary.baf9d39f.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TA/u2OsFhdRh0Ml4mqCLiYBLOaqWzHdGrD/9DBZ/TfYZjpciMs1TGUUp/bE5Mln7KGSCd4xrUw9NFWwYBJjhYw==","shasum":"cfb5138e412bb7c1b8fd790b162b2bcea82206c3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.baf9d39f.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEfCRA9TVsSAnZWagAA6zsQAJPlAes+K0xv1wTgL7a5\nwijWIRpQlA799kVXXt4aJnq0GezxrO/aQdpDW0MRo7Yvs2A6g2j8Ff7Yzeqi\nI4Gn32aiaWE3EYekfC6VQCTDVMQj5evCqaSj+6TePFg9wYI7dbWUbXFlLNcH\n4tIC9qLzCR2y2F0DSq0yygwEQd70Z6tRqDNuMjPcMpvpDVWe6msK1vBJGS11\nRWUqk4or5nxPiETpNVdsYe1a8BNOy5OQD7G3cPwYrj6FsH/LywTQOJExTBnq\ndUnlERZhf+Fim3edGsXNhEyM1smZsmInLyw+aILjvNV9KqhpP6DlsJX0wObS\nqQjC1zG9ss+x2f+TSXaBlRVnlqMgqTlm+yvnnW0+OwBz12fXqq1kel51EosC\ni2BPDWk4KJXDBiB38pTr+HwUsCTLtsVR6DYjx8e7N1Rpkj8MwyUOpoTK941H\nSVmWFqMU3a5egal4embQa4Itju79E5hrYUTPLHLOX8GlwdIq3OeIXtwYmUVW\nq13WZ9DQEaqEodl0BjMubg0RZMXxcK7AhqidjbWrBT2Srts5pQ7Ul21pDwOf\n4lWwEkBofGfrudw497qjHI9omDHoe+dTq7BEnU8xtxY5HQyiG3sYVfOdU2mp\nhv0M1BRIJ3RrBTbO07ARlzso4oDnCZLFqkuTXvuRctBiH0/YV9RVufFzrMil\n69/R\r\n=yXLZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClt879Y9U4LxExzQZ15DqLCZrNR8iGJM6ZBWiFTWyM/wIhALs91eEdzhi9F41usEqahIRoIWUd/UR8Lr9beopzI+N5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.baf9d39f.0_1606340895362_0.23253611576088318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.51aab0ad.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-circular-progress":"0.20.0-canary.51aab0ad.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-iji1CVFHfBSdOvpdsx8wHLsWuZkhHnlHuZ7z7nB2xw7H5CnsgPnfzYtYzRVHl8pW8G993KqFR3hGRc39oGpXXQ==","shasum":"848597337f8d5de783515f1430e3f2bf4e304da9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.51aab0ad.0.tgz","fileCount":16,"unpackedSize":42844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbICRA9TVsSAnZWagAAqlwP/ArP6nCT1FWWPxEndIr3\nTbTIX+4qnuReLjyGiJmFkzROh8l8oKsHq+769LT/PULpsm1r2C6nNRaw/9NB\n1FWyIdjZAqWPIiAIqIKzuebxkGXkWT/gA/T4Uwaf2wM/M+uAj5xxsd3J97is\ntjKfsRDnFkDbBg4EsLEEDOsgR9v/d4UkvhJi+L/gjDUng1hkgJ9CzyOS7m0+\nlELGngJ1NSxaumw9m0sj2LWbJ3qRZheUL3n75XWL6lE0o0ncoJUWREtdFkX3\ndzqoPr0KcPUkftDPxvWXw3/qc7Ws8nsIHU69Vu8sPHICKmnjDdNcJypdkZ0a\n6d9EHDcVK8RpUuDnHEIqsfds6npwkJyp88kH2ScckvSbhxPAeBs7Er4HbjMr\ncCMTnszGcQ6UtG0actwceMh0BrxVTSMoPdFw/Xws6TwigNPeCxGNxhVc6Ed6\nkrkS1N0UxRpr8+8cq8cod5WTcSAvUwpj6b7d+3PtrunzggHNQBYJSMMQrImQ\nFTBHhE6mv1Jxr5SFn/rCDs80d/Kvl/24o0bqA3lO14A6JwmGUkMxKeA43d2Z\ndEk0hK8vxZlA+zhjvrLpR5RTeLf8Tf5JTWyjouaKqFUHxdd7khttLRuUZqpZ\nu0b9TR2HWqV/70K7n5g/j/H/tkte/gEljTLT8ngszotBm6CwI6oVL2dknOuG\n4175\r\n=FyHF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUIGMoaZhT4ln5YLIB5dB1KiD0lsb6km53V/7goXebAAiEA+NlHzVcCTRELHjcEzqaqo0PcNuBkOcjzbFPZLTI1I8Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.51aab0ad.0_1606784711640_0.8637941202139865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-circular-progress":"0.20.0-canary.8fd4af5b.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IpoNLwsY/zy6qcwTYzQRc/oDOHDk+8vKsjcJX/NBtcMArIBEh/viY1sKhM4wmGVgIc4lG5zzP/nYJA29twF/3g==","shasum":"a6de07fdf771af93e85dd56368868197065b2292","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.8fd4af5b.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDYCRA9TVsSAnZWagAAhxEP/10XdzTlWx4GF80QZ0ad\nORiXFYfK5diXMpIYsQAf3S7LvggGS3cRgW8lG6mT61IiCOAFQNF/+NzKULyu\nZMdYcT+HS4uORm15nC6xeZRWdz2NLgzjcPqSlQHtkgnIlRsgdsD8QmQa/M1n\nefC8Wa1tvOM7nMMk2b49pivbJE593wY6bj1a8z148iY8tmIaC6pYvCoMh1qY\nGYXNXaxNqR8+YUZeye72SYIcKaGZbG6Wm17apiTM1RTH+83amCwkuEZMg92M\nn8+1JGIvVP2Y17eqaD4BM5VIUokH1aPT1+iWP5kar7jsvcBj3iS0bqP00Tu9\nXwLCR84+R2IfvZ3z2qL/+LAIq4xdzrQJVsGFHdLtKGcG0g2Y9Firzom0dwM1\nDUwXsjjw6RhP5AZHbpkqsBnzilCy5OWji+kEwBZG8k/ckp5fSJopp9CSZx+4\nP1tuXZB8CTDoSvE0UbTJ4FVphujy7uLXaKdNGI+DYfb2+viodQxLmn38L07e\nSBiV1XvAkn1gEzv45JzQHMn/s2Ijn4+8seoXVtVwjM2FiULvUAqD4Ka6T1aU\nHl566IZcd85mK9K9hKvBM8nSDmsPKc8onQ5UyuWwWRk5EhoOaoFnbTas+m0Z\nNqTQq14wYF3bNddEeeFkEgAn16BI5OnobyLmpSr8Nvrx1oLnJdzuabUUIZNL\nOz33\r\n=t2FH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7mMU2idnnZWfqN5TyC4pcAbJnMjuAj80paawn5TPgzAIgcQHjFnMPwCQ1WYh+HB+snhYonSPCTbELkyW1BorHRhk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.8fd4af5b.0_1606955224235_0.9064332869541365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.26d14d2f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-circular-progress":"0.20.0-canary.26d14d2f.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/rgdU4/Unb4BdbOiqP+fyNFJo4HzSSQ0yFArsH6oRhMo5UYwop6U5YoaXM5C/GeO/CDjWOneJAwHwDzMgPmc8Q==","shasum":"8b61c0d6e836e0604396983a331e25deb049aec7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.26d14d2f.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDeRCRA9TVsSAnZWagAAq4cP/1fJA5SFUAKfULZ+D88C\nDvPfRhsZo7ErczGE89cpJDLlgW22DjskugJnfCWlSlIxE9/2MPQ2QmASyhnB\n1TUyKCJMZKTMJYoBP98psqS1nOUF4/jIvUTR3sFyf3E7RwKJ+FzaAN88VYNx\noUBU/j1jpkXwmEUvXKodgaO4FWlLKj5FWP+zDX2EEfauxZ2z7RaQftoR6lvx\nUrTSwYC2Wju6lhXfZoZPeMj47btYn5fth1QX6Tmj+O+EzriXoRpFwZDI+Y9i\nC8JEhkPX9w6A5xt/NiZXXVm8gsB9KBDWGNcGRTqy9dSJbVjyDGES4SVDRneb\nRsATuqSNm3fsRN5wJv2OW0XuZmWUm0L2Dfsh4IkTJkCb3L+Xhi/vYAVItqiv\noSV+htj3TonvTwe5UpokzHSG+tlvK3430Y40dEktzkryQaflKCq6hXqGRvE0\nHi8MhQB2/UV97luWR+2lU5Jjay3c9XfPFwj35MUKbLVQlxl22lQ2ngnrjn6J\n2H8+Fd5hyqzG7vUCTOxro39k0fi0mKrKupiZ8SQZnfjBN28wGGcpR/jhUFhy\n8CIKvZuNSsITJgHZjhPihSXXldQUMGUiGSvAsT8RsKxbDCAE9pVSP8p8rPtM\nLmcbodbkGms5rP5vZaaWoyktRt5/BT1HZDZd89uAJ5Ht3jzI09LvSPJUq4pO\n6FKF\r\n=q8tA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/sLLMBkGOeFSoNBbdtEInBRjdt3Z8dVHqFsC6cd1DnAIgJMHE0YSBI1UeQOMA28UXBr3EQ2UAxVVbfnuyA5FzMr0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.26d14d2f.0_1606956944552_0.612257967015102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.1663d7e4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-circular-progress":"0.20.0-canary.1663d7e4.0","@material/theme":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3dLjJIeD7eeYsdzhxOipt7E5gZHoHgklujwhuOKSRfvBs9t++w69bK9jFlSnpvPkz43DLp1mjgYRPtV9rN7eew==","shasum":"f7febfa640281ab1c97a2d467e94c079c1138a85","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.1663d7e4.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxmCRA9TVsSAnZWagAAWv4P/RqsEO+iImWzxHx/+yYK\n25BVSCNaCORLEN+BLTc2JcEEmGQK/ClZ9GwcoPBHkrpRjjYOWJAdLHmECm2Y\nGVWUBT66w9crPkZW6zBDYiAyKS7z2nEkAzXZAPHjHjW9SLyyyU0GrO1GTVAB\nxz05RgOURhPJ+MVpDykmvmqfJPAj+oBNhWDSjBH5tNZ9HGU/0wv6oV5Pf9mx\nNu6GzrMLn6n8+DW0vZ9gU2frGpY4mSS63ZjYOAM7PvBEN3fuGvPcu/43WBQb\nNfdfFDaIZG9qf89HvG9ILVfu2oLDxV1j1lx58CMo5DewKibLEYY9TQ9p+Ele\naAtwN8OS9yPuVWn9IlMsqPZKjyIR00xXKycGaTF3xO25yIZmxc3dzxaPkWR/\na3ieKP+5biP0bY73rPSfLq9QxMGnYEs4lT/bLMphxUKDysQNSVjsNWl48/Hh\nIikG0blT9w/E/IGqn8bxYS7AeH3SPhsqMnc1KB0Brn+FgyTvPhVWLHOuk/Hu\nL2JOQOvwbbfb8R447THj44ssJmeesd8hw2JBkOGK3fXNZtoSuNDO37eKLIqJ\n0ATmamPI/GZwzPCq8llPsbZqxe26AUC3QXdNFmiAy8HXXyF/Sx4Voh0J4AeO\noiO51AEMZzll8/e8F7CaTH9sk9d/ZHlv7gWsR+mM2FMZsy5xluxwDb3i0bVP\n78S+\r\n=gxrJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDILYKO7HDBMxMuFcOxpS/8+DsImL61Qf3Rfbw61ScHKgIgZIqSSwPL28uLCwXGlQ9qiriOtqElSXlz8VECs7ySFxg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.1663d7e4.0_1606958181759_0.872625045896773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-circular-progress":"0.20.0-canary.cbe9fc12.0","@material/theme":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Sgcm2q/r8n7isKPxywCkYV3zOrvOk7/wyY02D7cMYRJnysSs6pHOxUXqDN9whDkHpxSdd64UB6ZvGI5D8NjE9A==","shasum":"1edcdb53c4d2521309ba8de6382e160e2e228306","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.cbe9fc12.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdXCRA9TVsSAnZWagAAEQwP/0NGl/QaMpAw12I61iGw\nMSPPn6/GXSHesA8+ai9r1Ccss9CTq9OVAmD6gd1VbeHvlxYJQK4dugsM3DXc\ngyYWlBJ9E/4hunS01adEjBnxvQd58q2sZWZzGYew0e0rYIKhyB+Jv5hkZnlV\nodOlM18iov1lribaBZo7gvJIjZT0flgG98+Jyu5je9ofwsvYX1XJX/GrMqvp\nKbFvOBLjmw3qaxRQ8uv5tL1dlSggpawhjCIptRRAmbvjEEriITGBLOiI00s8\np+UfH1jzZVnb5dHTEWpu+zOsPc7fRxkK/vWvkyK4moKZms0F68pSnOLx8/7o\nlTzPX6Z4g//Db02ys7ZdePaPkk6/ntxNYD1GU529zXDUDD5qcihbUNt70V4J\n3kP9kjj7MlGoHlRpRYcqk514skEPjeym0Z6p/jWRCjL5TtUDjWCqdJ8mx6B9\ntDhE1SYyBElRUPBJ9LOiu7dIxKQGYXlvrv5+JOFI6On1JuzcGnoC4Ibsva7W\nhnoxS7BoT6F3FB8sHXPGpSWoD81oh4gvYo69z8yBXLqzwMjULHeaoyDogWEv\n4LK4MTkx7M/bT1SDU/RE6yZV8gQnotKgUHIoGI6zDhC1ajASRpFgU1WNduTe\nXn5sgMkYfv07UOwSRG6tMfgflQq+bDKRlRsfbNxjryz47NJ/v9y5aG+DDZlc\n+z1g\r\n=fEJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn/NG3iRgL/zg1/YqMqwvS0bCimKmX3mUeSS9s7usLxwIhAK0i9ky2SnJbJQGQ3faBpCl4+ghlH0mV2jWQVmqnKgLH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.cbe9fc12.0_1607022423548_0.7366203842815555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.9755be10.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-circular-progress":"0.20.0-canary.9755be10.0","@material/theme":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SIqYqi7J2yEVbjG2I5PaiBztUgZpD1ejnOegE/mFrVD2BGBrJb/WPSMaRxkY4EbzGjJSGOmSco/WQjKMBWz83g==","shasum":"c36bedea97bed3b0b7771b3a3d64215fdebd9068","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.9755be10.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuZCRA9TVsSAnZWagAA/b4P/3U0OZizB3uRacnGw8pn\n0nj5r0H1211XijBPk1gmCmum6R9t13HYcoG8vi2g65ntMpAmO/iYIo5yyzew\nppLsYTcwBf60LD0d2h+rp8ZDqsw2dhn/SOb2J0nYssVf5rTWM61rtw5dKPTd\nMHp4SkZ3nBeMpdZGwpd/X7hmAYO6vNuMsKdqwthuGWa+a8Q08CX8f/9t0vQ0\nN5fHIkTkOQjrCRIo7yW/vSKF9gKcY8byWnIv/cB/TLx2q4xzYhnTOvetcfm4\n6wanFtiw+8T5+oPVAjZP/dYCyWjV0xXoFApOjiXPqWFoL6Du/btN64R9Aw5H\nFukk6XcsfZ/csJklomTHkKonjJbSX/FO9GA4CJ3vlDrS26roVSlbrGT6+vI+\njlzGrOZ1celatupetViKZHrCHp1sxsGa064hlodyXcoDGF/vBC4WpbbN8LfO\npzsz9wsNCj9fa9NjbUoF07hf7l2xmzmvUWAhqwwtF3zKAb62CG9GgftyocC2\nxReSRasN0Td11rFXlVDwjWvitOagtrtWMWVtX+/kLZRpSHr2sFwl449MjBeu\nQUd8QkdtijPpjgU0cVfPE6gJHS9kZeyYuhDrjaAQC3f0x6mSo6mxMogM/Dgu\nbWy0ltJ+iI1mKmJOZxxQhhG1icRz3QhAs/qcFgylf/hsp36OY7dv6P1KP4/w\nthme\r\n=XGKh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3Wpk11KFVWOVVkOBshU4XRSihn7u7QgUuw6Sv32kJfQIhAIUE98VQRvpUWxzOnqZZT1F9deSKD51cVl45PXAq4u2T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.9755be10.0_1607023513507_0.8847547656131047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0-canary.3f64270c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-circular-progress":"0.20.0-canary.3f64270c.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vchwxKma5hQU+saC4W9PWWHW+gmR4ocQXQiL9dN4M4lALkOpofeP5UGyOlv4747LfNj2NmQmv+m9Ft4IdM/DVw==","shasum":"7349bc89a2c2a26370e42f4d2f9abf70ab4b43b0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0-canary.3f64270c.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1yCRA9TVsSAnZWagAAkA0QAItkVxMvzDoh1rswrfAN\n7Qi0BDgBqFCnpI/T8aaYgj5V9/EO6x712Z1EtzUOoOpS1u06k0BR+tDPE2jC\npAs1XG+P68umkDhvMZ5DpiFifZ5lElffoq6Tbsk7bYe/Gs7qPi1dmiBow7IP\n+mTLQaYJgb23L8S7MvaIhH3N0eCEEuKzbq99qEaeHQZ7nX0FI1Bfo128ZHkT\nI/KyeKYzuAPL12u5xSGyBx1TkIDmmDEFC4/pAqxEAwAgXe7deK/GsKnQJX8v\nXRKNUiJGimmOhd/jDi79K/iw6YAgKoWsQnFIXp/twnDX6Di2+ZHR6JH7G2I0\nHVB5/jNwAIzD2+Iy4BQseDlPC7iTEeOKcGiaQYpLi/3s2kfo2bYy0YHApcKR\nFo0K7DJpM8VVK+sHCXbSCBd4YzFN9V6eCnuHdnHkI1JI+XhpOZFNFDD7xTJW\nRz76aW6CHKgUcogob8FcfgmB4xsIljp2XnSt6Uze09kEfMGCNYsgmwUYOZdD\nCPIdUdFawICUhhGuZ0tR/uTK4MhyHKA1sL6w/arYIIjV4YFIad6Z6cZqw8Qf\nmYm+3z0R+ZMYAebKVUEK86gvblTpKjg7mIO/x9pci46pVh1eGkzrvYqnLbdc\nseAydYK5rOUA6cYqTKjABv0nP4V1h/ICy3rf6D63RH8EnVuAGY5OzZOTEfP9\nBYmv\r\n=qnc8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxIznxV1vQFTawnWXwCFtWSRIxcncnuoy0c2wnTYy9hAiEAqQxAAsYozxz7YtdlVJm3YpFUUQrIlUtUdGqZZF9yOC4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0-canary.3f64270c.0_1607032178352_0.9305142819486065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.d893b14a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-circular-progress":"0.21.0-canary.d893b14a.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mE1GrHE6JJjBIOdo137B1YJ6VVI8Mv28Q1gHTX4Gbrxt+1L67r+vggZqOCHMv5S11loHZNMc4f6Ypa0MAYJx2Q==","shasum":"a16cc7b8f024f62e9fee707d49436c5ce0e3b897","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.d893b14a.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXxCRA9TVsSAnZWagAAcJEQAIhyHhnfMteAVfnNxkvE\nO3PmI7VGVG+k6u9XmCvaM7qTqoPRGURpBdH8Z6aB8Iz3SDMDO94MPAcRkTYW\nHNPcFIvDwKq0nej1n8q78NJmJ8LttB/oG6qaH4GNcQEvq7TtKmbflV6nDph8\nzbghRyCsxMNsJpNjNcXiS+MuexNEipSh5TmHuZP9lENUcwsXsyOqQxPxCy3B\nOR18z1CgAxXYXfzgBwZY8nzKagQcj1ldt03NWJWAwGJW5kIpiBkOqYQErFcj\nczwJp5i9R3XUf9GCwW6kq4uhSvS9Yo7a1/m8A0CPDqbh4dvPVT8vKQcfaLUS\nnLU49ljd/qpjOQlWvC/ityHM6sGQRZeOVq/i2loz7cAlXMLOiTSw92ticuG4\nVeBNFCLGxwWc04pg3z4MkiGE9mezV7WPoviWT+D9kTx3MRPJi1M/TsAlEPtI\n1rp1k2wxTUc4XFwDbdURcVERkKrj3HgsWVwQEEb/0XSfnyIVOAZHy3aKdzjC\nyvIu6fTXkeYrP65iohphb3IbiqAA0xX53o9iOG1p5Ijg4t6HKOHKEGEHiIex\nlWfwR2uZAEzACGGOq+bOlkQo0W+SA4SiMvTYfLlJ+qQd4hxBUM+jd18KC2bZ\nC/QYcrFhsiYQC8QIE34a1oLH8Yum8wFLkh0YSO0XksrwZn0MbJ7iHAFActYm\n8dG6\r\n=j669\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWNib3d7VAaA1p0+ZVmJdr8tvWm+7GInUtYaNFHEoPAwIgBlYhXUXdRr0UCX/jb8VgfHYovrF6ljS4mdXRJ7aXvlM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.d893b14a.0_1607034352978_0.7872493121558619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.20.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/mwc-circular-progress":"^0.20.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-GuIpbdR0NvktoPYsrwXMVrmLdcEK3e40XnQfQToOTbulG93bOjyWDoHHKeOBxx9BfGPPaV6mQ/wPZJnM4X6cQg==","shasum":"fc7bab61f85b8880b5c8a8bd5f3e980de85662f0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.20.0.tgz","fileCount":16,"unpackedSize":42849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWamCRA9TVsSAnZWagAAzaAP/iMdxFCqHJ+UoagSvW/N\nvOIblr0B3Ex6fSKVfAlD4C8lblzbqX/FX9OoZdHYzs1OZu5K6HgGCI9F10By\n4jvYfJm4hFDQlS9bz1N/a0OHqMWWOPuUlP+g+2+61HZQ3N++L55BLeSpM4Jc\nbp069iyByVoYQIXtqBZkkO+X1cfY9jtBnUjjE2FAHiGlbVrDedH8E0IJJYoz\nzT2RMi6N5u0Vyb7Z8L6LAHygFY+3WXEfUhdaB1tlpUmHOBa7iTSVmdg9NcAQ\nlpRsKqSaa8+QknnXALxuljmejUCcXu31WlL8r5LCEkOOrbG2bmM9QQSThlNq\nGcj0TmZ1LT/n3HEDJoKYrJdj+fAv6kNcjRkzNZoBleixrkYkeQdkH4KPqhxU\ngO44ZL5z2GinFayuR8YN9d/5KYQLSReL4u11eEImvGs+DVB1yKTx/lCym313\nNM99FmcosT/iF8T/iMBzFmVxvNgg7zk1SujRUaAWcGOUyAGHdlxM8+xxiQec\ngE4ZiRu9iAcpwUfZifHCzl63XD4uRI2GDCX4uAufrb8ECwMpF/oRe9pUXHD3\nxGBf++GdbkkwYwpgoELCANBTT4cy78Bi7DFQDuykzykbUwWUyaB2gcTaCODD\ndtWES8+TLzGGVBkUh7MXIWnfPgGPfZ2j42528eIqHbe63VmesAK0Iayuw5yZ\n5sIO\r\n=ckva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFg/juemSm/rYI2h9Z9ZLllp+fWaVCFTmfLde5Q22r6AiA+WlonL+480q32l88gDNKzSG3sDylZWCY5TtFiMlOLdg=="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.20.0_1607034534009_0.3832004461906222"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-circular-progress":"0.21.0-canary.47c7d7e5.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/0yL4pjQFuKKwIuvIoiWGHp525f1038fDhSO/VB3zBnSGi6rPHGE3POkNqs0t7BTWcdzOQWNecbZE6ObCBajqw==","shasum":"48feb616d3d4b574a3100a8d3edfc083fb019943","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.47c7d7e5.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087+CRA9TVsSAnZWagAAD3UP/3V7xVQjw00tBup71qct\nEPNVsnBpeYEKrXThwLcjnG3RCijFOswhenXrFAoAb2MmFUuJ2eiZ6nq/tGuC\nfYmDQzrRY2aM3ch0PDRrupXQ8CsCoxcWsg5oKMcNRwzP/OhWHWhfrS0ySpkd\nixeX/3iNbm6MrYUlBDmzxpAoonVBBMwv5enqHhidMcBSITWY0oCUQtXqBBRr\nAYO5V7Ni6+iXQzbSgKVO6ZyuGOHf97jrP8//5H0Ov5JgCnPGN+eIKM1UMg3P\nMq16W0EL4svT7S4DxC+rkU15a0Pxu9fL8EKrYbSsd5eNBzr0cYGsrDJiAwKS\nc9iv3UPwDXdDbzoC8GM2WR7N004BK8dLaebv9BxL+L26NE/ih1MslaLdlA08\nxGr/7G++tGR6F6vCaX3tgPfdrCcCK9e3Tf3XTpWT7hAa772+mHBrYVoCNbZy\nA7pr5BX7xUlpqlaPIOG1RwCfGaJuHpyeJoIer24G0ZlAsr0mZJD1vQ4GzAxc\n53Ybyki26yL8zFQFsup4aDU8d/CTzYA7hMlMKvex5zM1MW45rja99R95FMN5\nqFM2HIb1MUIZCUgcf2rwwQnmmCnNvHSyCR9+tAKt72naKdRV9OWNK33z5rVY\nkPQQFDGCmJBzdu7Qe3qn7njDH263ZK/TsR0OXAXbdHwgMGqntSRZtnozRLuP\n4B8I\r\n=chau\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ91LFUJspCKM+qKc7W0MWTcPIxd6VwQ3b7OQBQC/duwIgaFxngUyVSRHEgVJMorK3bWGhpnfSzONqsZB8vhz14Fg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.47c7d7e5.0_1607716605844_0.12462327259028494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b304a78b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-circular-progress":"0.21.0-canary.b304a78b.0","@material/theme":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HcHxemnyRJY1kbUwbufAyofHi2GuiXiU7D5vplDKr2c7gYnoJ5n+YwfyocWWBwLehQvdcwDtSwQ4wcwpzF+msQ==","shasum":"b0f05136d843049c433ad18967a2c245fe65fb45","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b304a78b.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RakCRA9TVsSAnZWagAAVbQP/2IdLHsHk8z9HUH0vKQ2\ne1TwluhgUJ33gOfyA5Ctn/tjfJb/6D2jyyVjvPaG+Sf0mntRU47yoRFhL9jY\nBdZZaBC4QU3N5q/8vfL1Fcdf1aI4EmVyt17p0uhNEasKe2HO1YnIDSMu58/Y\nGjuMSzENmQotX3rSTVQ+PK5+a4PIsnr/D3LoaMY41j95xeONaw/yEPqS/DrL\nc43XkDsN4mGBizrcESxX/gDLXbgGv/TSiTSA7WvVAwES9rvUqEtVm2EwHG9p\nVPXKktp6GuWwQmw77zGWJgudToEgbOB6tvE413WNHDPoQU38RvSPRFoaePfc\nH1jK9WuhisIqFJX61Cu53MlBZD+4kFWIy3PP5sR8MJaCoY4azMcEVF814hq5\nrSLUbtGQxjSuEwIoAlYolVrK6t+VpizqK7Mx0G0F65+mAcVtCfDd/IRD17aU\n+lDZNPUZrD0u4ZCnYjkSEd8tJzV9Ijyfx3Cu7Y3UiUEWH4lqdTjpnbhe8JIE\nWt3kCQ1iFVixNOzXmTI6dhjMj7dmzC8/RdF13C/nuTkPgTbL+zKUZ4yFK9eZ\nysLPWZaEJEkdvCbgN8fK70YKHZ+QMXez9o0q7AlysQI4dqhGfGD+Xk4hMTo9\nHspPvy62VAPyP+GV5esmmtTHp62U7+a/9pEE1PSE97S/hW8L5w1PVPBNbwnv\n0agq\r\n=A0Vh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSDVsCyOTVU+jQsIKpf8C3/onXr0IOaLJgxzKSV/HRTQIhAMVL1sfQImgRJybyUq+3GcmsLqzv8/7e3xDy/ndO1SuE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b304a78b.0_1608062627929_0.2743798638821042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.777c5fa4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-circular-progress":"0.21.0-canary.777c5fa4.0","@material/theme":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oGyxH8rJUXZcAGiE8VFeZ4W59t41WdDengajavi8SqTu8P8tEcVGGC0n5mOKJrPx6awQeA4iDd9U6uSp14bJIA==","shasum":"a1879d421bb36bea53ec3da331dda53212981e04","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.777c5fa4.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHxCRA9TVsSAnZWagAAhC4QAIeHlO3N1o3o+LG7lLYm\ntx9E+EGkMqudTsiwAoEKGYoEzE2zjsfJ+YABdMQ19HB/myBj9HcN2aJFThhA\nCzc+gox3eBMW2NGcwfRiWPlrHhb7qo4ZjDWl9c6J1Zq/auM/16/5dqOa6GJ2\nbI7E/F8eZ47fEw1TyjHcTkFjYD7hKkHkFwnDNZFPGaEVmyHeWUfOEFqm6KWg\nwvtS3tDC/LDLcnk8rCXhJ+qfaEfX4DizD7EEIF/E5Q7CJxsUpi+msMLcaFyV\ngY/eZKKXo+ym2W2CuwQtEAygkrczaB6L/koHx7ib0OtwQqraiKUHZTYzZ1V6\nJUr9q7ZkdqhJwZLeWVRWu3RjPg3tCh+Vpko3gXtYOI2DJBpYDFFXY/Di0pcT\nMnLWuyDeAyE8CbUNZ3TNt5zRchQfRUiClBQZktj5wbIUQ4Z/Wqd5ywfajs+D\n0dwXQg09RW1XEK+IMNsqG0xIwWTL/sKB27V9c+b1licpPwzshOCr5t4+BC9S\nxI5saOyO5H+lOjxUS7COVPREK6QWOMkIUhLX68yUp2fg0fTfYG4hYfVdfQoS\nzVxSfS2pgoVgJFgYE8JAai4kxrj0CJP6O+2AJOfqDf3fHKPyEAl6FcbbyjuV\nKQNRa9k1r2Lu2biFKE+ZmjVlN+OmgFQ3/epfC+FeZzqYd+qG5SRZEFWJF8zJ\n37IA\r\n=HA5c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDNPUGYzoJAi1eDe0Amt4zNjNRTJnp1fyO8zUUY46eq4AiBKh6bMr29HDZlNLToQkdP8NgoaJK5qXEUTWefwI5Z/MQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.777c5fa4.0_1608155632989_0.18136031569639566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.635c7996.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-circular-progress":"0.21.0-canary.635c7996.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-trnm6F0F/to48Ip5EBwyaF+js+qH5Mk0BPge9VLfbHAkq0rwd+JIrt0XbfWgHidn/Ro84rJFnPCyppMTHnW/NA==","shasum":"83c5ef720d26c715bc03a133a3da6d87e2825e35","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.635c7996.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pfCRA9TVsSAnZWagAA1qQP/02u8CG9wAPhsZO8hHmB\npBr5+ArdGF4Fry0Rf6+Ol+CsEIOolSKKyiE9zA7pWZgWPYJSx6ShreCNY26y\nAa394gbLe4FCcV2sc6wkTadCQTRcuTMbMWFgRnqYvyIUkXfw8PwQafkcsRvD\ntJhl8lNLtrTXHY8WpIEMoAE60zc/hyS3KMKg6/LM2D2LFl+ZMeeG6u5QlY3F\nesRedCOJxOZozV+mBYUuYLWOLyBFzU/uo3kXnJb2elo4j5uCONoexQQ1qL5N\nFmIRHySA9P6pgPC1q6GPiqzvdl4SldZLeyJ+8uS/zutCzqz2ynlXP/fuBXBO\n3bVs6WLnmkpKbTT0vbYOR3b18lR1crr92Abc2QCbFQZj8ZsAH0jqZnv4pA6b\nmkU71DnjlZ2Dmh35GnFZRr4pfY1SxjipEnxl8nwMoqqnm8X+VYMJF9XwLCRS\nlRKQ2gLhCmH8hwXOqB12l2IZL18UP9eJWVxo1kZ4ZqUeT1h2kSN7FhpCVRdZ\nZYHMcjUntxdKoZmF4tBz9A2laWaQKcp7T0IVkFaodnsvHZ+odyfY3YeXRGj3\noDzqJrThopyI9qgnZg+CdVADuJE8hmNXc7YcpBX3A8+IzHPulCcXYnEL9Kg/\nTtO1NRTIXufkvkjHMYNacVI2FhOQF0BjFfp3QTY6qTMuExN5jV0Eq9f68BQF\nqhg+\r\n=G8Mo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdTx5WhDIV1ULRe9cnnJkM/Bx2VCL0/ktC7esCaDYedwIgejT9oLVtPVUulIie2t+z6JejosZBQfYnnEIpgStwsx4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.635c7996.0_1608247903334_0.4033217788441956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.20b0045f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-circular-progress":"0.21.0-canary.20b0045f.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Eigmg0sAtJu1LZzYtPfmv9eNYbhCY4ytimB5UU4n/raV9l9hljCRroLiQZ/4CjOpL4sRhWTVsmFK4zYsmtzdyA==","shasum":"d2ecbce2dd9f0e1d1b16c674aa9ce2bcc8039130","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.20b0045f.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5cCRA9TVsSAnZWagAAGKEQAIhtdhY01OLOHVYe8SRC\nua3jYwF8TVRvO3bWslwloEFH6V0hFZdoiZuqPB2DddSVWjbUoCD0LxKpml6a\ni/FHyE9AtaYiiFdD5PqI5zNzArIyk4/Pl35UR1oOgm3BflSjPGeUh9QN/2cz\naQlQjH7WuRAcYTvEH6SVX7g0apSqJqch4/9bFSBzvvJGRhADZhNyZajaYpl1\no1pyWkwUiebia/PCYzTZU0b0RAI/3qstBdctODnrC/UdkeOBQqCq7ZzwQbYl\nmJfxHv8e3frK8yduiPddUG0hYvlASMAKSc7JtuvCeJ8Lf9kCSkPH8mRobTta\noJXbR8j54c+SU3a5k7yJO3wJ3qhmkqO9LRCUDkFnTgJEqt583GIYpZyOik9t\nXWrRvR9tHOzLeyJrYyx5iNWGsiJyMgFUaUrHRupujUzTZ6rEm2PNOs06sltY\nS5Rvy7vBzLVRDEYzJKLoJqpE/9B8VDDMaDd4vdK7/PKj+O/bIcf49JkIdVnH\n8LQJjkYEF2W0clhBjViqo2EvNX68vfj6fjZ8y3eq44xgY4AYsmGgJtBgTdp2\npIa2VN+/5a8RYOP3dHzU4a5QXFslqg4kQUuoY1fEzFfaujXub9gekDJov4Ft\nWy0nFUaILKOM+mZqGs4v/ZVJQZfejs6Uy7FPWs4NRYbFu7byz/MuFVREkPBS\nyb7D\r\n=sLMF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFU47fV54gT4GS2oCtrkkIt7xwBNkXgdbOu+u950Br9EAiEAnw6UXiwnFbBYb5FzdcX0TUXnLQNHiwvC48Fz1ZjWe5k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.20b0045f.0_1608248923805_0.012113555001133092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.41f77000.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-circular-progress":"0.21.0-canary.41f77000.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UFUqZfIQqsomQ/avjY+9BeMBkuKRgn1JVCux/sHRNIQinbiMtcL0XY5FhlKySw/wyqVv2faQZMpj82IqYADTEA==","shasum":"03bbca82358b0ffe08a8f1c50d683777640f724e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.41f77000.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/k1CRA9TVsSAnZWagAA85YP/3oxEc0KAvMsb5enA7VP\nZ8OCIpSyQVMFQtKJC6kIGM62QxsASB3LVQGYKRCAFWGXRqNK9xvGsUsJRkwz\nxnJHwsB2FLy/PuM0Drqtpq4eX1WAZrPCyT9Sp2fnix4Pd83JX9mj0uyjSbfQ\ncxRbjPLy8pgT5wFizxPFR7nCjV4OOJ8ViHzPY7eP+44ujve1dsxxsg3mDy6L\nOHi9FzWx4HfXNnQTFAIPrfihPgVbOanijOLx34AfcIh0DnxbvQNSpH9HVq+8\nTm3h4F8CzyOt/7YC3rgDFHFayXanguBAR5NHhSdXgO5TZTz4dyB+PITqRrhL\nMUOrSePZAwYbC+m4GwrAQJmA1ZwW0M5OlZhgChBaRFuf4G2RSOQCTJnrooT1\n+SlzJFUd5n7FQcy0adILrgDRMOh1i2xm+szCU38Zq+4yXfNZSSO0rCWEBRbu\nBQrqg3rArRhcsLDi6mxHLcVVhd6Uoe9t8vTXcz6fCqY18D/G+HKkjszl2Vz6\n+HaYPsVNYlFTMQjWm28j9aPM9F5rXi1ZOnHM0aSNGbuI/9unXH+q8hun1yFb\n/iBryXczMbHtlfyrUXWetJnp7cBFc+Mogbgt2MiO5bBRVLxlVfS656E5G2CU\nMVL1L52ZuBaXsfhRj0LShfk8NRKnfY+iqVphXG0rAwSy4zlWI0aKnfs2BtXh\nI+kG\r\n=mpNX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8XEBK1ty42alIvfr78R/7u9WBqOxKPRakFo7pCe6v4AIhANmoI0gM+7lWJUvGSS85r8DQMvl8tzLC36CjlOo1je5o"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.41f77000.0_1608251700566_0.7446465324194531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.afe4079a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-circular-progress":"0.21.0-canary.afe4079a.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zJuKL/DV+dfvDrdAnNEvBrNamaHQbGciJFJcN6FYqUQPed1ifXDtaEulKe3+wtadxgJxJXn5axXutur1nxwxDw==","shasum":"703e34ec4cc616c3ca741cf409b723cf386c323a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.afe4079a.0.tgz","fileCount":16,"unpackedSize":42901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9YCRA9TVsSAnZWagAA01oQAJHzaW/2bfv8NixmefkF\ngpSDRYeyc52mgmGIW6y8Ipdg8/KqFCOKGUZob3PrvWL7NmV5hnCClMvFpksE\n25rc0ILBkiZ6uRhUZf2JUNUFLy3DsyjeB3+iDQLfGLmpLWY+Og9FegBR2AZa\nUS2IenL3V/WpCFasRqvLbY1NbYvaD1RNOvmUUsfGm2awKytPTvM/JCx/Up7l\nf3+0z2oAaIuwCSiOOLHnoeYlHz1i9yeMgsuv1uuotri7vpxD4YdspKciAmCb\nK0BOjV00q4fbw8062nrLXwiKQQFY/+TX/GbqYkmyTS0zDqpLgvmfdxk2mdTq\nR2ktUlFWnGD6PesHI2egaoI0QzrO9vhKJ/UHHScRYWKOAQqdArTVsQzzZ66R\nIGmDIXwr1UrqdKwgZC/hQsZiECYbaQcB6l/UZ0+Y1QdomvFlc2OGkoLVPqpP\nCxaBw3f/DQRiWFi3IIkqlZj88MBNcwyyRvzQL7jVz3FrKNoIlQG2OeuPSRm4\nrAV+hLjeh8CsQtsArUNk5Rg170OdSZ2IigPq/OmqihdXDa9OSIzoGUBkw4/s\nMTt2ZzGjMiFJLdaI2Sv6zChqTRbVpugkXGbcfI2/DPLQASC42EfQGWQfvyKN\nx4S7p+lIUuTIX5ak/Lez6njqWrQqPKMCp5hUkUXnyGhw4+zNq+BTIL14fnUz\n59B0\r\n=uyUz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDD3YfdCRB0ipLjRigTwGQjY7GHi1DibJPI3vToEOMhqgIhAKckOwBAUfn8fUzeXBKwO1f8oPKqJ+X9d/ylRVFjV+IC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.afe4079a.0_1608658776213_0.8289026108929984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.407ef8f9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-circular-progress":"0.21.0-canary.407ef8f9.0","@material/theme":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9xYS7L404V6bK0CDdPXXrIXuHaViSwJNIZ0BDLmwCTluv+UDd7FVnR4FOsnz9kN7VSeCYMws5TE87JgCnOtBdA==","shasum":"8807788a0612ecffee86e44e601fb8172196e743","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.407ef8f9.0.tgz","fileCount":16,"unpackedSize":42903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcJCRA9TVsSAnZWagAA704P+gK6xxBupRr/+ZlwI7a5\n1xMfFzRrX2UA381yRLoeoOwH/MWWEcrN63PcO9H1XUQiQ/9vNBZ23TL9gzUR\nGncsaOVF9wS+qQDWQ5sZlGFrlVrMOeouYGWyJF3OrEOSAIkJmInp7OEwQmwW\nDfSqKO464uRJIrfuYWCw8guN/LbxRyo3mLqdel4V3qk1eLE9YKMNYqlKMzK9\n+ZWMPdaFDTcMDHi5ygFENKIIWoBpqfIHR85JajX6BXkJ0pAVsL5cQTiOO55/\n4hZed9wZnMHeMUCnyLrpMMYjEDa4vrQQpQTzKRj78Gy01Z6DKNUMGnGJn/sh\nOULB7h0T9WjKVmmF4p5P+1b20J7eQT/J+3zJY7fKn2+0lRYkXUMFf/9Cm6VO\nCAAmwoLoLdzUtsqIifzwn4pPgfmAaoOxsh55hdexDwnEZ4RFdVApqZochhHP\nvOS7ALuVUOJ5yHDPU2gR5q6A0Hvnq/QVW4FdrI+Pbdj6p9XIUp5tKZhkyjEW\nDVB9GUZLMlDF+rOqM2Wlx+TLod0fTm4MnWZEC9Qb7PQtehGMZPS5r/kVkA5b\n6ZpEiX4XWKHBdsTZnneiS7/4O/0pDZiaaQEamlMcBHXwuq8Q596+7kcxdJ+a\nEWkCkF1U1ssE/Jo5K+MBWCqo+pPeu9Yird5tnA0/JnYKuAXzFGriltrwuRTt\n6pWu\r\n=YYxo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaIDLuBks3MTpZo6fCYcQy5+ETpOprG/XEy/QAMfKxnAiEAyR+g5dX/gZHP2dpj9yCCy6zJKMOrl8evWFa+6Cx4B+Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.407ef8f9.0_1609369353371_0.12849927189407206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.2e26e137.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-circular-progress":"0.21.0-canary.2e26e137.0","@material/theme":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n7doMFElyuY3pX5DIgQ6qpF25nxEjqaHmHGD1SBtYX/A5Ml6ni5Tx3KO1dw43qyX/steDMUx/i8YRykUegoStg==","shasum":"02156c1bc2e00cdd8fbf6d5d0324defa9bb18c22","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.2e26e137.0.tgz","fileCount":16,"unpackedSize":42903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LS5CRA9TVsSAnZWagAA0+QP/3rbiTNUS3wUcOo+5YSF\nkk9OPwLpOwJrKq0PynqLpbBsmSevUzZ6v/zYwSmjef05anY6dsg6vZngqVZW\nttUaRz2dYAlzcO2+WeZwEaP2yykxS8jDOez7Kvz3mHUZ0FqDDYZM81uFMCMt\nmSHL2MY3Pz42TuMui6uXRQVIboQg1PCPZYto78JFtD3hVDTVhqAg2pIO111N\nK0Q+UucsB4jSAQDLFsSvH/iwvaMtJ5U5ESVnL4oVoiygYc+m7tEpkTAbXkwc\n6csMe6y20tIz3wc4USwSSGOx/R+hNnmSJcJc3bYR/z9E+C3L6Z5An6lrCpRr\nDQxK6OV8mLZcG4K3agcXCsedbbNmQA7nVk+L65DiEDY0yhoHjlhApBNoGzxc\nFsHMUYoaOmy0EpxgLbAKWBcUN5iP/zSUPC4XVtABdmQmms4IhFoqO2bQMicG\n96YAMpEbxxScTRr9yyqftOWNvMR8o70+8oRp3QBjFsoUp5YoQD7h9VpGLEBj\npT4TbZlf54ZwhOw91SI7Dh2OhguuodlfKdrV0DxPs617XtvOkyzTwXTm1U8E\nHSYbU8wUVEJkAygqnT2heAlJMjHQO/7qe776s16RiAebR3PYj8KSIj7OBu7+\nlzXVUGcs5bf3OBjXWPLhyOlRaTbZG7ikS1M+A3GLk1r3a/K1ejROO3e6A8DB\naO60\r\n=r+Ox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIOzybgePZDvrERsGiRFIwFXQXjzdRUCa5YhvEfiwYkAIgGYXqGnYS+/HH3Jgweo5bX3GoxYkOOW4qCObbv6efPQA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.2e26e137.0_1609872568681_0.41769031003302826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.9009f6c1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-circular-progress":"0.21.0-canary.9009f6c1.0","@material/theme":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-T+3IqviiqEl77bfbaiPM5u8dqiNPIniTJdtpwjmvCCLEa07qeEz9Xhi74dgb7iAcvvaGMpERaGWW6BO4lrUIKQ==","shasum":"009cf3e43e39499d64d468ffb608d63c7d6cd17b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.9009f6c1.0.tgz","fileCount":16,"unpackedSize":42903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhhCRA9TVsSAnZWagAAfFwP/2+Y8OIMIxRkkKGKJFon\neu8aHBzuJMPePvv9lzVNM8+EN4FGLlx3jqWRKkL/C2NuQ7LVXr//3BDXeuX3\niWsbykunCsbEY+/q0mJ2+Rp7lSmwEI5/a7W70OQYKmEaCmVr7edh1FCkAkJ/\nKB5BlF11F1pto9MWsksTo8oAvFG7z2GsQilEDRYmCGIBEnosp5IjWkOAEjSz\nJnlBut177vBN+5sbl4ziB5DfcRt6DU2VoeYZOw0ZKpxaTEVpahrWkiNLZZGG\nIeqFSfqcvxbGeBs5F8pbUNQaOEOsdRn9aL5sTOWIB/N47jpvix8wW5yOayIz\nloDaWYMJ3xErJu61bX9gYGpChVynIS90fdQrckI/Gv0ijEWbW+XHEZNdhYu8\nk83RDFHLqLaZLC35hpwSU8gkX1NyCV6EE2akUA95S299SOggRrLpoHBsB7xq\nZJJ0526kNgLUAbqJWTGMa+h5MRqqZwEDrJ6LEZJW58NY4Ide7aDcU371PbVY\nCOtZchFJoMnYSD7bsRaphZBDmM/BBgwsrLmb7+BGgih4ssEeGJAmAT2+UoBJ\n3pU1rrqRlDOZxvJ3pq005D/QeQJi9snJHVQFI24Eou/g5Kyn0rF9RPLlbC/u\ncyWEoRS8ypdqSWNhs6U99EyFZ7im+1/CKTEtLP4KTanSh3s1G/KbJKhoISR8\n4gan\r\n=mZ8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbOcvIPSejmkCOX/HYZRksdUT7hD7YOj6Y0wQKguwvygIgKNOSD4rM9DAdAO5TFlUXcNL/JQ1mM+gWBjGrc52KxaQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.9009f6c1.0_1610135649468_0.828399118104618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.ee99b646.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-circular-progress":"0.21.0-canary.ee99b646.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-sa40ioMK0ujIiiP6BiIx/dAmLBB0g/AuLGTMqu57cwz5lH92laTYq1GKfM4tl3FHAlQG+AhDgv4lqaLquu9xMg==","shasum":"c9874e93cf6619868ecbea29769f9821c93ad634","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.ee99b646.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpTCRA9TVsSAnZWagAAFkoP/ixQ1d4QwWhiEEx1VXJd\n+XAD7HnlDcAPg0gJDVsBh8rU9Qsj+lqiNEIXHlgQy4g8Ejw3qgBFHRNIZglu\nBW+2w69UJzBEmh5mbhf5glZISlzlF1T8QmjTyKkM73PFhqY6n3lITE328aS0\nP1DjRdhFX8LI6xVQjKKaW/y1CL0N6bNpmc38kT9hTAKW6juVnqfGeTliu+k0\nVX7FuFc9Zoe4Vpj0IdPPzcwhdzMplM0pkpn3JW+S8hgTmxuUTFRfRj9G3ZIt\nlMfwP4OAMupf2eXfPxnraBmiRAsEtQXssOmEaFCQhCgvYVg39IQauPxVW3wq\nRYx42rhvv1FJswLiUzn5s7d5C5D+MSOMRmrF12gCjC0A20xPXI0lToncsC0t\n/socTf2g1UIRcKR85tnc8qyZBrLWmY4dwqmkfPJfYwocYSPZI7brTjqJACz7\ntRSEigFEgQu3OsBYKx6MNwm0y2eXz3uXTXSJW/Ty51HRA6CSivt22qhP0Ulu\nSa3cq21BekeVc5owkQXm10ZkGkoXcM7GCwwSErXdmrPw8rORtWZ81d3PWKRz\nnXyXmz7gQAgOQuZNQ+KmVaBaATbrVm949yz0rUbDTkwEuZNUMoPDIVSWFzoF\nbJwEK3HusjflL21/wO1Bjz6ICAF598tkW+k7wYgdyOFx7owyrAszNKMYUdrh\nLmbl\r\n=F7jr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzjztLW3D2fkzCi8sn05QVUM0wZF9E6QZK1geMvhrGWAiAJQ7qAaU7uMQrOmSow/jpsVrYxjL+13F118AUcyTkpTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.ee99b646.0_1610406483519_0.4775806298272489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.740ed33b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-circular-progress":"0.21.0-canary.740ed33b.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gZelycra+xiqFV/ixCdWD8V8JXvwX3VB1cGzslgTXEyb/PsWuEn3h6CVMZ7Y4OhiiWtjxsWCdn4H5PiKbcsMcQ==","shasum":"55be1b7cc171042e0137c93b036f5253ee46d3de","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.740ed33b.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSOCRA9TVsSAnZWagAAc6MQAKNrejTRMSqkzoJwmMvy\nsUsAAnnL/hZirS4PtgPZBXwPMSY2wvH9VhEuALBa3Xj7hILBwkuJbUWWo05b\nvodFQzfw2a26LxyydUW6qcEfaD0FKxh7pmkQtXHvu1AjhMEVkrNGMycMpVFA\n+pAYfklnApmyeV3wy+UGNY/fcjSGdf4lnR3W2AWZpvypkapNYDdyYquEIABD\nLCQvxiUbo5xockLwRVXWwoBzrT+6xhjaM/C718sE9U2de+CvjMKfOUNukUwy\n2TIDsXiboTSiDiR6w55Dn9xLkF2AOuOgnYWfB5jLhS9Y6/O6XZnqpPkjKY86\nk7TSCy+NceQqHVNHVNr20Jdw71FTpo5SBuitEp47ALbH9BixlkEEBYUCJj3O\nmpikvXMaEHx9Yl54w7N3wdAqJ/HVmBqUvYsqUGM+s805gfW/hpKy+kxglia5\niqq+nYKZmzUflsCA2KpVxH3YwqdCcIew3ilsR0sd7XaijeyyIDnb63q4oyjB\neJXdL9GcRWVbr7b6k5kkSqftCRx28fiIJpIS7sjVRlx6bQCgqzcerdAan8PM\nlkOICGLEg3fbnoYE1yYDnqS+uqeDu32OcR4H1z/tSljMt/yLJIwvjTtkMr//\n6EHPw76aatjRQe6T/7fpiVMrRySAYaTrwMphMfdPKOCCxB0tHYE5lHNQnx+O\noHyA\r\n=3Jg6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPlu3WPjy6dgXbCF5lt3m9KKj+cIUepx8LcbSv2IfQmgIgQq+iT85MgBTkVYbuUmGv7o4p3TwwSbFwOcoC92z6Qpk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.740ed33b.0_1610474638426_0.4728839854474707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.c5c541b1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-circular-progress":"0.21.0-canary.c5c541b1.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zrcarTkDoSCDt0C8f9SMXg9GyRXnd2N3C2hNMcm7o+u49lRXkMgaCHTgCOyJb8bhaUhpCQiLAt/sX0BihWo5bQ==","shasum":"5ab1a15de66eca1fd021c2ef20fa1752d7026d67","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.c5c541b1.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5FCRA9TVsSAnZWagAAB8UP/iouDONp8FFMCI3P54z1\njZ40fiKIJhf7zmsHpgr3Ag4OjZiBBdWohqkqRdffc31+8tbPjGg5TkyGczlZ\n78vWHfN2wB+ZRVv19DHbwnDjx2sz8PBfeCYT1Mwm98G4YqCQbS2NVkjfTU8D\n/SbqdYygMMUqtoWj454Sk1ncvKAYGoQKxJsij4SGs7Okwu1uEGWCcrZTliDQ\nyfvougjgPJgXjsHe3A6Mv3ta5uDCUSnBJmZWvqhGHlYjGCBNpYEHXrl60fxy\nJw4uwKogGQqFPmblzvp2yzVZV/rxZfnxnwPMY4pVOrcgCGBLtGLmy6ptJfGB\nsR9KdbD/2lISx0uZDZq/EBVehnei02DhDJ5rrRU1aHRvjS+A6NTBULc1Mtn+\nj/m03f1dgeo8OGNvvXsdN1PNUJZ2mKbMtQ/ANIqcEwwJuWqTMW2cawtkhhnK\nPUWVNPsP9WxmUiOrXQaLxdDNo3e7PDsjWK8EbmpwCOaPqB11fyIRzIG2xJ8H\n+A8VWuDZZMnIF3Xm8I68kZkA1yiSfli/Or1mabGQ21+YKOvaFa5cZiviLRrc\nj95aFF6jIfBPLJdrQwgg8eBfCL7eCOTFePxvfLmh40k8U8USkdASi4nZk07B\nA3ThbOwe8JhHI0tjaOQn5kUSI9u9eMjKFQWaG8HtJfITPFL8DIbLo59LtawF\nDsDk\r\n=pB6w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqWhDyKo7y50+Civ4jKI/iBQx49TKssCgmBDBgZVPyZAiEAmgbEzHqeok3iPAuHgT5E3QgM6l6dJfywLZzbM6S7XTo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.c5c541b1.0_1610477125172_0.45523101421995604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.06fe9d90.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-circular-progress":"0.21.0-canary.06fe9d90.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Km1gDR5TTXqkpxhhsVMx55NJyKLrpQ1i6ypUURdpvXRIn5yVGgHQVRP7as9DWplodk8olKoD6MnZp+NVabsh1Q==","shasum":"f6de173503bc25b9a43bed0b8287b5698a36857c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.06fe9d90.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gycCRA9TVsSAnZWagAAlE8P/jvLvExI88pfXJrYzIYw\nvzBfrvO+1mGhB8kF0VH8sSi5eadu5nm3junQ6pV+Gv5NrxW8n8sErXbkteBH\nxb3wA4fgg+gKGkUqaNMM9hrV9vC9dnbNF5X6hCW06c5ssEDyhAPDbCybOvyA\nVKFSZF8d5o8V/WynMAeM3LZoZcVwDIC51ZZ439EBNpS5ew69/9RvHBX+ivoy\nA/VZ7c0SeEmWkU3s1WkjTzDgHbUJPiWCWn1d/KI3u9Uaf+wMV2PfVCt5GOtD\ncW2LM/p4xtL/uSZeqa7HvF51hEG/ab1mG4znYw7X8x0sJABhCMTtHSnMgGTo\na5rwbkVBZmZqEp3Oz80E9LEF7qXmpzkxTvteJ8GovXpbl2925Zi2lFrlTSy1\nQQ4v0VLf1zfIZfbE6Ghm4qnh9+PBKh7+Dfr2N9KbgpNqSLo+TLYjNHThYrd/\nFJiocixJv6HWM3yBSOBy98aoaoSV+uzM2VBOMp9W+PJufeiu4lsVxuFGvRTU\ngeOPTAlfHUbIUsVxpHwFcISiCT3XOnyx3LBnsLUPH2vWpUorVnb8aAkedTZD\nJHMyQ9SjTgbmYdQGIgRyUnmcqNPKh1LgvPZbQ7Rj9VAjVyzBwQkXYR2Fx1DY\nkwnjCdO8H3tjD7Mt9VNZ2tt91U/rjwtxgV3GEFgvH4WLSIheGOq7zZoODJFd\nWnQG\r\n=C85N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF3ccLP7t5q4jSoN9KwVK0Bif9QhtEFBn/YVdVFHSiLgIgUnsIDZZYXcFQHPgfYFvlKtUlCyreO2WQW2F6THIe13g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.06fe9d90.0_1610484892067_0.20270208889286367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.269eed01.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-circular-progress":"0.21.0-canary.269eed01.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f0LbbWrBwhi827m0bAvjvBcuk/wNPsTpGOuRx68QBYx7b1CUNddeQj0BjkSjJS84JRj2T2P8rFcRGo+nr3PqIQ==","shasum":"6acc3facb4c62e181317fa0418dfed457f56c0bd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.269eed01.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nkCRA9TVsSAnZWagAADsYP/ieX+m82WJbyAoXtBvRy\nZzNuuYmz/fmd5YRtHPhnQnL9ol1iobYeDNgpZdfsP8dcdhyPYQFbCayIWkJa\nVit31htpxIKuAEY3LoABdk7Rr1czp4wpNipQinmRhRp78/DSWXp8prOLCkvZ\n7bnmto4zGPppOLNTONAkwzH476gQcPNc6qGaQdg+I4RKo94jo2XQMciBc9PH\n4khLg8aqPyzbzEmU9Hdqpg0kYeVl31xVW9te2kIpJh2KqxELb75CLsEOfpbD\n/ZOHk1SZORDgM3aHmOPSTtefdfGZlGwLzR1T4ByOYJ0hw5rOxRbs0HruOaCj\n5ncyuu5wyKbL+bRVuYgO7HdDCzw3pgQo+Gi//b72S/ETnNeaQqJdRiUfC61B\ndpn7/0DD2E+Sxwhy5HaqVtCG/q3YLU7hPF9DCsI6VUG/IKYfVEw8pSrPShyf\nesfrqyQOb+bC7+zdVZ9uTzWc/6th1XlZZUKpK6uTuV8Z8F5HFHyVPO5BejJz\nWAarVwEoCfz+x/yIjRvWSmHhQFNgY599FA2JzyR9Lr1A7dNA9H6LED76z9xF\nvc6nobQwsLzix4qruTDEMvBfC+wfeJ4dwiB3R/gkYDms1U88CLXFZFgoqP3E\nbFdJZBugRNdaob7C10TtlXx5u/ByDIpPnYp6d98YE+oM8c2pxgAyImHA+TQt\nllTb\r\n=MBuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1zAfyIeXFkcAklUdNSEK9JQ3YpQqkOcDT18qtTPdt5AiEA3i0rRuQi5ysFWM0f/zzY9MFuJI2WXa1K4DgCeJNHhqQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.269eed01.0_1610574307611_0.42269918571423637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.8c075f35.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-circular-progress":"0.21.0-canary.8c075f35.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IYj0T1sbw58qz7KzIEgvkTyz3jGDfWFlWsFQ/XD/uECgh6xlS9IBUBq1ZtZM8DnaJh6C+uOejzsQqMfifuk43Q==","shasum":"096fdb79e3cf6429a9cbb6730d18ec425bf65838","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.8c075f35.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30LCRA9TVsSAnZWagAAsAoP+wQjBxftxfMY4OFl2gWy\n7eCFwrJ2iK2WP+rSNqPff9ARaIVNdDMCLVYuC5Hjxs9nCd/rc13/LR+DZQM1\n/XVHRMokbvZYngJFLq+hlCdUU9QDes7xTrkjPIcWZqOuI/VsBxl6nhxQdUeM\nJosyp07Yi95X6VKqLUXIwaoWiahy91FtF8PD96SA+N4tPO9Xo4hGWudS1yAi\n6RaEOG1fIrLaK2PCepKZcvHJyTZm87cjoTSD/9XkN1eWEPJmZ9FNJ4s5Erot\niTLQR72Fhl6tTEaGc/vNtYtRZhuGWqt71NUWWgCZpwlvxbjyOlbLNht/gB3S\nxETp4aKIV3pU5J4PwjbfjnqkeC8ma/m8G/J2dzHcUDRPk+uT+cydm5Z0LkYs\n1TlkyuXpD6g+GIu/SnFjoIClFSme+nP7aJke+0FuF39lsIeq+jh7GXM1nLoZ\nrdXbtubk6bpIEswnOJSxqwAkbMBcZKbAeY/CULhfBKOeAECD+Re0RPMBKrh1\nAj24BuMUAOVLL8EAqDbH+fq4cxlNIGZGX8+dK4OEftrE87zS2ra9mryohlEm\nNjAzq4KbwjadgYbydWY7DT7qsSBuQx4mZXgbxKOOALalFZwHODYmMag9pNKw\nZga2GAGXAxkxlv2AZqaMwKH9SWuUqUP4Hywx8p1u0LkQXssqzd52kpAngl3X\nXA68\r\n=vmCe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICffaOYANQn1/j/bl7MVTN/ETolRTwuoaKHPeJmnTdOiAiAKMVr4Ioy2uN8uWKwhMTBGExApiGvA9xzUdGdYM6ZTTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.8c075f35.0_1610579211027_0.37940584874710925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.3cda381b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-circular-progress":"0.21.0-canary.3cda381b.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-U2ioiiP3yCLksnJJ31KHGYM7jI6IOdbp2nal0uXMXM4xZ6LivFyToG6U0P8hiGm0/jsvRO7pbKB9TtpbJjm0pw==","shasum":"abb0d23766e0ff1cc73210f9e0ebd62801bd994d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.3cda381b.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qJCRA9TVsSAnZWagAApJcP/ivXO2bOLFsSev2gwrCj\n1YVhdjLCP2Cjgi/EspMErEfnkvCGJKkgkx6Ane2WZCDXZH6KSbObYlWZw4Xg\nwZ32wZy7uOzHVOh7ua/w9YTFV8ddgTekFop+1EB6hxg+Sf9255OPDDf2eOgc\nr2m50h2u7PvwYBOCsa2qfcWVVXP34s4HC6BzFf4n9pRH9nGPVp4YLOFApeVG\nuFnaXNUgU5y5Jtj7JCT0Qf26nswQDT9fRtzmHJRWxthHLhxDq1GKEuhY9YyD\n/Zz2WQFXomv/VpeoxiEIHMic1/oNZYwzmFyG3zkQAV0CkchQ6O1XgqsU+JMV\n3kZ3Ux8oDXwW6w/BBr+7QpdqWof/SHN3CqVsbLpljA2z/xQydZJh3lE0MsD0\nHT3zq8jk0W3mB31HfCHQC0Rjwnghcjy55sxtNx0pUtr9BFfkS6NMFNnXlgIe\n9naPt+xDJOpuZ1GvF8DpxfF0l17KRjCpN0b6ONZMSxu2B+4nZPGcRKxKd/vs\nsoXYtqfRFBd8hDUcgsVAXh8dxz3yuf+GLK8CWJuKdEAZcazVgCPtYAQ9qCE9\n4/28AOWVXXXlbPU1cOsMyQioK1w7S9s8aje7uaAr1B9PaRtNBBdLrQaEFaah\nRTxh1Z1+6YdwIMD7IHkGyOhKkIHd0jvOsd5uTyLfvDV1G+IveuPLlswd5YEC\nCfSt\r\n=zvj0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAlwRZ13nlgee+1m8H9WZUi/Y1Qr7PIRCDk40oCAE8MzAiEA+Y5JeqZ8pmCHorKB4Vdvfiy2ZO8LmxR50/76QJyuJ88="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.3cda381b.0_1610582664899_0.04700135475358258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.bc113605.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-circular-progress":"0.21.0-canary.bc113605.0","@material/theme":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IzovPruCR5VVY+Js7fUvrr5Dv4PBwbpFBAmtOE+4C0LN07pBrtl81jp+V0e7xZSr1wtbetTa7HwzDxZKAg3F8g==","shasum":"71036ee1d9c1d18b8facad20d50b46f9fc9bde62","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.bc113605.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QXCRA9TVsSAnZWagAAc4sP/RaRsQVkrbOuTAXKnAdb\nm45gwwZljuGda4o/aWuUX91Fw2DdhxeT6CC2DS/KWeph2W3csDP3cfUD0xWg\nKqPd7t/la93jDg5ByQl+bASUg18WC1XvxLxEgD4z+gcGSB3j7VgW6543P4ZO\nSB3CXXGkOpjQG2d4kh0XiatznhtrSze1Wbxq85Nmem9RPaL7nsjI8zgmAbEl\nujppZHi/zXwooQC3PFVHhylSN8O66eiUznzn2g1PCQ52tSMIa1307LJLpT3b\nfaaAsFn/EYIyklnOxjg7sLtgmFVv0krHRk4eGU+LSBZefLV23eZBXt3MlBCZ\n9WMut9IcN2tPnGKGJQjsZtaGG1GZjrE42eXsytxHWA1Es7QhwNQJHvqqi7FJ\nwEyY47PoJ0IQwpU7tm8q9Q/nc0LFtDqPdPpJv4XSzWgJTFYB0j42dAa6HZky\nydzpnA2l7Y2e59nXEgxMsl1MXmzZa/YLBC9Lj1XRmQH/l5Ye5WHRGzk5MBqm\nypzHn/H3B9ctRkbvrUVQuGuopd6SXoLVxxFTl0RExMpvwk6iRCBskxvbKdgb\n2NPgZq940zr028bIUtB/eBHC/jpmKRM+lF/oSzG0yCmkNGJMKzrR2WH2fpDO\nrmmwG8qTC3XNolFYBx7HKzt5uTpCVtfF/s6qYK+cGAdgoYfBMPOPQbSk2F2/\np2hQ\r\n=vakL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCerhYP3jfDSiuX1LJeJdtkiYR0UYsJZJeCN6GKDuoFAiEA8K77KJ9g0ZkDXVmnC6Y/ej6hwzPu71Cnk4FRsxABHzQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.bc113605.0_1610585110632_0.6453805731051485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-circular-progress":"0.21.0-canary.0c1d6ff9.0","@material/theme":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gEhpHaPWgB8TVkpaixixEN7x2okWfk2csQ3QDEAUrX9S8mJ71vM6KWpiiaw6O735gthUpX6ZJQzzW1xxVDKJ5g==","shasum":"ad3c9cb56975477779de38fe5d15f4b4d5591c37","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZkCRA9TVsSAnZWagAA6mUQAJLTWd4lBFPKld7JT6HU\nIj5IhUbX2pkBJhgZMUt6nXyiDHq0Ty1HqEpLxAvuJV2s/nb+ovUCgEP4IoTk\nsGST+IdFk56BWLlRrojU1/a+y50YYKq5g70u0S+08+RJKprmBXLv1IBaF7cN\noSvgwJbPT5CXxYvYzU4a7/VGDmGtMP7JTRWug14NuCBvuRpMs9opHtqbSTYC\nJ5Yy8ng9XmAz7K7cCV8qjeA0nQMWKmjQ2VsHzRNrBt6lOrHIh8Joy7uElj9O\nfpnmaRH1fjFSP6SDzNSaZuu8EJ1EGcaFku8mZHht3wOh2wDoEX1F3T7hzMUw\nxwGxClExtanv20j5cLZ4wKBXhty/bE7kYB7QA48F059JmyiDo6rOwrysSKdV\nWFxWB3EphLsl65ktqS3EtAnjaqLjh7ural3v61P2PW3jo/tnJ9p3e349ju3e\nvF4sscVJovb3lhpia5WmoLS4200EZzgAuF5oILZs07xCkK3N1D4TaPT9ICyh\nQc1vbRps0xAOtO+ZdMSf/Gjf6nRIGKZFjRNnWhs4dG9TZM86JPBXjYlW83YK\nlGgIj/l2GKh2R//0L3K9VzlSU2hepWLOdogezbJF7Ys72rfTWjwZtS67EoCE\nUJGMXk7bnR29laDvYhY1eRQZxPkYUMvvzYsNLorcERXEnkf+c63Bc06CQm4o\nL8uH\r\n=xK//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEhsJi4oEzpXh4CmAdYO4UTXvRt7JalfMFk62BNg1logIgbGKNsu3fMFG/+q1TRNVXuJCeePnCReRmj7HfltPoFO4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0c1d6ff9.0_1610741348349_0.6326787487048724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b4332e00.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-circular-progress":"0.21.0-canary.b4332e00.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-1oPE5OF0xDpGTUWfc9mVeVb3JeNocM+8rxAAdDoxvgV187rjIHhSRho0e1ZqdGSkLEYv2IheRiyM4FbVIWXb9Q==","shasum":"b85bbbc37bc1192616a48efa47952dad404fd006","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b4332e00.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIZCRA9TVsSAnZWagAAWBQP/jmoAe1QSejQ0phZvJVE\nbufQbFRFVLjE6DDu8gbfEWK52sVa847eFKCvGBXE0kOzC4C587O3CRiGe7Yl\nJYSI3iEtmDh5biNenkQ/Clu87C32Wo++6Q/spMfzNQWv0x2FmncLoyK2jFZm\n3Qzsw46mwVSfzVp/GYwJtwQd14nx1X70vamSbZTXQJcr6W7leiY2FI+bQ7ZB\nPYHY2pUt5/3jv02W173OwLy55NFY0wg+B7mZ0lfrQbUUA6/ZiJdxBEgJvDWD\n/lW2/kH/FzyclXjqcLgQY+7oOsOReX2qDXyLrS5graoUs4zMRSEpPNHvNdU0\n1BIn+cwEvfm3MjqiBA0OFWigWKupcBLXCqqnl2cBGmuepwaGL6QKtR8R0WBz\n7GZmxUhDXURtzK/L8FRBPMEIjP7mt/c/avKVciQB3fs1lxkY+BTVZeWl+XB/\nKNvScGwqpUUwpqN6TDtuBLE2CrkNgZCqGhE6wY4zqBY0qkZ23qna6TocvXsb\nDRk5Q0FnDNZfE/NaChtXVhWkHEqbBCO8JCLnkrFWvShSPShyjbhJw2yVBh4O\nnW9AwODYvFNmiF7z3oC8ksKjImnEYIw8lWib7+HToiTJPAxaIxQo1rh8sEcf\nfXREAUu7ud2v+dQj2S63IYo5B5UVEXQDrSmcYM7PoFHABpXYpxRU5BpIsFLp\nSKgx\r\n=n90W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPxGNelhJBaRrFNHRnyJvsMqjEq1rH80nftkaJEwTuLAiBtMMvDWwgqhV4W0cX+aEE9T9xbxycaOSJp614NF543OQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b4332e00.0_1610748441471_0.38634847893412894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.2899691d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-circular-progress":"0.21.0-canary.2899691d.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-8uTkO/rOorB5fWXOt/nhfwG4MDc6rWrtuiGs/ZfH3Nqm1Q0YgNHDYRL9byURFaByi7aOOh09rstFg+bTexYwGw==","shasum":"8ec4871a761c5429eaab7879c9f6821229c8aa69","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.2899691d.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkT4CRA9TVsSAnZWagAACZYP/0AN+mXrZMgvzjs0cEKL\nvITdqnL6DsQjGmdVq01ZEbynTg382rP8dI6YD8kMfUmD5/CvqKZ5NL1peRRk\nlCHiNrwc09k/UKjYkj55BJOo+LwIl7VwteoIb0MTtIXv7APvlDB6iQvq59+Z\n2HvonXJwi86Zzba5J+ypBqC+TrceQKyQSDh7vh7Hh6PsnvKM13vGnLwa5eUN\nAX5TyvjnjvaZd9DR0tLpTkHq6YY2/A52zXrulG377E2bpxlWE6sMdmnhHGlZ\nj88S4CTl8KMysnS65KApGmywdeb6JZEoJH2gkK4a7LwUmcG7SLsNUFoQYVrb\ns3GyerCH1FNMW0tTteg7So2T5fdstz/6Q6a4P2lqeLtPvyxIO+atTWRysGd/\nplC8l/aLd5sWd7l5nLiga+tZ0LvDJTPJ5htlNfK5DfpaccV1bDt0udwsALme\nL0vgMjKuEiIw7GDrhk2/jkJfkU9tzq7n/BWHLM0Vd7MiHjMpV7o74V5loeDE\nt1++n3UzYNOKfu3USnHn6T0JuPhoT67OlqAYBzK3kGam0yBjKOGATUC3byTR\n7fKrPZzd28P1XsN7CdwfKHnhDB1HBRpZ3vvDzDM1wFvZ0ieMunJDHFkTouxZ\ntToC0x4WMGK75TYpEjV2XnMVJT1hk6J5SmlW+c1bQ/kaOtNPoV9HnmfsUa+S\nsCMb\r\n=Ab+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6otfrxHXiL5NNJkE5Xdtoipql98AlsdDuHvf94hS9JAiAKF98cloYOrvBaRokRI+eLz9Fpyegyp8hYa9SpLkNDdw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.2899691d.0_1610761464410_0.35528706400766685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.fe73953b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-circular-progress":"0.21.0-canary.fe73953b.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-cgtQOjkJJckzIO1E/gxRixJis61axHERBVxFLJe91T8gFpkzaZtBakLNAr5HM/DXvPTt+QmKX8bFzXBXZ25b6Q==","shasum":"fc4dc96a425aba2be2ffb2f3931414ae072895f5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.fe73953b.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEsCRA9TVsSAnZWagAAW4MP/0glwxP4aVCGvHJc6d6l\n1MGVMtx4BFS/RGVxLLEcVEhGmUR0I5HNIVOYW7rMOD1UibScfXXsTWEGZwQq\nFGjrJ26KYjyE6ja6ntUfmukbUIjdGRYxPQGz5UTgR4i0lZ3txgzdAG95PhUF\nIhW1JnQrxN7RaNF8Oe173b6UF86Tba6ORUwd/tpyhXpfCD8zjGOrudgByMLE\n5E31uyrcFWMM+ZlZ1RQ8au1gnV+2e/dXZtH26iuFTWsjGkEcxzSmhxwwUB8B\nCMqPtgLuhouKA5CvYD/fsLu2HCaZ7wI6SVNNgXMaQOxeMiYfSkosdJO4Hbl+\n6YpC+UFqZrZqSTUmbs1usGLVQ6yK73VxGMQdDNQYxWYAUCTEt5TCyjftYdlp\n6uZwgUIRTn9pdWNwSPCbpJmVzFRX4e2KBeUMfS9XG4p6x5ECGlTUwaZ5lAnY\nbt1YqsCPs14ukSwtTaJr7e0m+mwsdPO2PRL7kP42mfhVqmxWrRnYZRbAUPe8\n+iHJa66kat5osHywqYuJjhxTiqvcwZhaLaL6161j+IT+uHa2vULmMPH1qP0k\ngxGhhjxrxB8IHEO3tybDiq6Zi72T3c50q6c6hiU02Q2qCyiAgVLbcsrxfkft\nv2Cm2Knh9VRnwvulxlFGeCW1Gfiqy94RAz/HXRi8LuFK2mxHSk6OX0fY3oq/\nQgDe\r\n=RUmI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGnBxcqbaDfgqIpG3U690xeRvGg1notgpnXNCzXNZJcQIgX8cHxeSdwOHg3eXPJ2OXFClAgu/HGTlctIwPROPX1XU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.fe73953b.0_1611084075665_0.5772738174539276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.d3a16455.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-circular-progress":"0.21.0-canary.d3a16455.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ntGmKZFx6YgnPX4nr0q/iPYM7Um4/p9KhmAubj9ZFhbRz1QEQ1IIPMQ1EkWeFCb70V2m6lJSMu0Qzk5pUkxVtw==","shasum":"b3bc9c39adaadc7912653f5c3fbfa586c53b787e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.d3a16455.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhpCRA9TVsSAnZWagAApEAP/RE628062T4Z6WMF20/s\ndaICSN7gIElgQsxWWMRLJuy5s7P8iwFr4xCvrXvwQU87SJ+orO1NLSi3lnZK\n/c5iqqXXBsb8n63XewKNDJrXjIFVKbkgMtuoDjcd6KnRH1iat3lA6ex9l3/8\nH+YxhnXVOlfMGFxkEJPAlAsdLqgzQy5mD1TBZ3mNYccqQ3mIdoB40ZLKIpid\nYckqfMi1v+19DaJy2dk7w6T5TjVV8BOZWbiTBLDnpsko3ZnoWJBLn1U8Nuza\nsjKBDIYOxm3Jz2NqrKcSnm29+UnRdzqBTiKJxlEgYkX3u0MqgtXRxrxfhQwf\nzYk/83BB/JW7G4gb7Ha8xiaH/4JNHc5GwuXUtPMyCt2ztY3xkcsE0SrY0LvB\ncSH7Kw28z8axY+3emI+fMUjPM0cKKZK4YNcd564sgzIScZNPDI1h5rWXK8ym\nxB5GIE9cKR3sz1ede7rHz+zj1CGx6sno3GeH6J3/PEEhcAU/b5n/9VmFXr3X\nV69Y7Vt+L/Y9LWXv+T2BJhkUo8FagcCWSRmsk5SqESdSC/aaiC4xJBiLEUwz\nX7nBJ/TC3fi1FSmOoWqY3XRKAQ7pkqt+DkkTLrrYc1vMmLHYlQ+LGj+BqlVG\nG0X+jeMPv19c1ZVLPK20ckPXd6uIM7WJmv0TjvD7VvC/nRyL+wPxJaAify51\nvBE3\r\n=reaE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8mFhiZ8Lvr8VtG/UXOy7lE2IKM5AEsKPtZu9IOcCItAIgDtsU87wbaWH/yZm0vyo4TG2t6wHhnFHZaXcskYCGdaI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.d3a16455.0_1611085929174_0.5731465878266013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.597ca1b6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-circular-progress":"0.21.0-canary.597ca1b6.0","@material/theme":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-zld1FZsc0RMIO+44WWMRJF7w6Au+D6/NogLm/dfAmQ1BJd/w2kXh240ZKF3BTy7ERvbmsl2MxUOy8Ck2PHwJuA==","shasum":"d5946c9f93ef096936a6cc8489c2cfae62ae00d4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.597ca1b6.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4B+CRA9TVsSAnZWagAAjYsP/02mhzeBDRSSN4ti8XyM\nEOS8Jc9VG0sgk6THij1LCZNsLpurfrlGOySKrmxYYp48k0DWkyfzOW5Uq9ku\n/MT3apHvd7gKcnwphO2jdXN49IUoevQoYrDxPQGqip9Whwz6dM9f3TSZEcGM\njDtjwTHF0TVMNpBtuNTOjOS07Xt9oRmjw/Cr7mr0FTDL67+zGLWWziQ0Xqw1\n68NCl78TIG03q4kRzHq2pUwb8b9ZOsreXjLtXlb7/X33cKWYQ0zpgBlRKg03\nDAJKiuiKSy8ETrlfh1PukYhuWPRv+8usE0/JKt3CM9vymyoeM6+adbIYNa6k\nceoqmPerT5Dm9eP3kezMalEHJQzjSsuY0iH0g/yso+gdKvFp60tIp8Z4+Ybm\nfs5SDJDv0+zUcCiqt5UZibyz9PA8A9HXMuHSYh1X9OIY53vk/PuRc5hZs/8C\nWJ4xOyemruVsOpNeyex72yT59AJwGJNIMG+BdvRIFsVXC1uzWP0nnd5+VrRc\no3Ay3RPbfn3F2kMCqDAI5gWkTzLiUiN+wKv8C0cT3Oz60v8NPG1X3u7R3gGT\nhmtuPspy+aFs/mI2vtihPNQ5cak6o5JPlLIfDeYwwytKT6nxBrU145xZ96RQ\nPu6Vf97X3eGjJeeqiUxaNBy9Md5TBfKX7r7x8GgmhoY7ByIiFUj+Rc4HSMwO\n9vAv\r\n=VqxN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFiLfMbTp0klueDEtLRuBMHjFOPWJ0zkawx9liE8G9dwIhAKX85EqhhESKXgXFWGr9AbJ1G2pL6exM/rAj4+eT8BOU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.597ca1b6.0_1611104382457_0.9055607365364684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.3c195efe.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-circular-progress":"0.21.0-canary.3c195efe.0","@material/theme":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-DF/3Y+M1yHarnEZ88JO+i8o7R2UFDoXOk0ISUTOUGGd5/0x8+15Dc7wsU91+qSlu+KSOk/0ozGYrohu2Sl4h4g==","shasum":"1f61233736c5f6c2dd7f2bbcc739f4e2022e7565","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.3c195efe.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47vCRA9TVsSAnZWagAASuYP/j4CRKw99I6QZv2pH0ad\nXK9eVcJuFEOthPkmY6Q7BRms9K+pUKsSjlGylf0f0+A6JTtstS3B/N1sdW5x\nIMA2Vn3mYNEcaSHRSyVVi0vgQxEW2ClAowDb4giO9flE1rIyZXGI0WjN0QlH\nep+JZYIU81e3kxl9kaGlXnXp9GmEeQXLLeVaHdZOB3VHgN3qr4Llzpqch8Lz\nQEBqv4inZw6U4nzaKxrapCPjavgcNzLRzyN9ZeOI0fx1f11uW3xGT+x8ifOo\nXvoxC+euIdxSvDj5sCqq5rsMLL7nXcknpXdtRMcoRG3q6QlszwIEEWSQdCXv\nKvbAGaFyeHnw9AO46UR1T/rNlU3H2TRL1i+D/ZA7q6XILjJouRIQC9jKoqfS\nzllzA0wJ4JTFoyunknAoSh6eDL/H61QqLGJg72vHeGKDIRfbNHQpgN105x9k\ngQQFHMNZYB9VPNAkmlfwmZ/jH64sNoACUrUd23GPagrpA2ZHZo8IQp6Qw9jv\nj0CaHm3iPSgXPnjGnJvFjvAiPdnV6R9yaMlO2WaIaubkVCyZLMdakkHcy94D\n1avdoL7u21kuM5KWHmJP3Iq4Pz1HzxhtN986H0nZ1IPpqVOvNfDfeq5PS5Z0\naUmmOSc6SEFgEWBL8YLXwF+TKadrsSAnFprGRuPsP52DVR3n2jnn18/NJF2e\n/o7W\r\n=LCxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2cfsCMNPmDXEOvzy9HU4orCF0SrxifD55PhoVPIZbJAIhAMfdHu2L+gCm8SJKQZun58GNwG+ZPJnsyWb+tmv7i+Uk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.3c195efe.0_1611108078595_0.19165470822525243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.f7b8755f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-circular-progress":"0.21.0-canary.f7b8755f.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fGED043uZVJlCpY9mT3Eg90zvMgBs/hyBfIAbmHm+hvohS7wAErYagbxMD4mY6vwrOU7w9iovHerSFg+4+HjSg==","shasum":"7a5108fbfe69d12285d364fb720195cf4e69d5e3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.f7b8755f.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSNCRA9TVsSAnZWagAAV0YQAJcnafMkrF47qa207Dd4\nrH6Pe2FmR1ZXomSbXvbqdvcp8xl3+58nd615PLc9Mfl7lctUzn9nHGLas1HF\n1fk1vp3dXkHRpXZi6Mpw7I9duxqz5uT0jC+WsXKDyDTUbedoCp6dpHuIHrVX\ntR+hazEcuOAvodRzvruTeJWu/+UfpzNXaNWzEeI/NEOlayKNzC/jWywzZAWi\n22btSnkAHHDkiEi8hxJUa3w0DH4YNJ7vKiXKHOlbaa1LKJJw/sKI3EwUdc0e\nJo4TPewgWy8sylJ2Ilyuo0RpjsdfHWUD3SRjO6Ju8qmoR8gCCsJAwj7cOZHW\nycB4cxMT/PN/kilnhBJAMHy10AEjU0eKxXfXLTImRpwQTzR9VXyonI3/D1Gz\nIgHVG1ZRiiGaAheDrkApxXgw8u80SvM9TumscdYLguUaMW8SjZ9dG1hHHDj9\nCMwzyhmcCZ+hzBVGq+pZxaY+i+/1Nfqu4JqQ4rbjhV8Di01MIqw81Zs8QCkh\n0na0EDwVtugYSDh4MqDbmK+q+lAbzTxqyK1dXRKgqZKzimZ4O+seJMworvZx\nmvYui43ZegmOhSSYRXmgVw6idG5QrbPEGgT9ZSqqx4LM+jiR9ujH3CDWjFgO\nns0o+KDtNGjX7q+3PM8wWOL1AuLcMs8tXkPTczF3k3RGXdDUMe42kyuEP9gm\nFc9a\r\n=R/Td\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsJTR1KghMZ1nwsk/iWNHTFm6ylEveHznbhVGuKwzwWAiAneqpS6ayTzBDoCc5YrMgIhRG3Y12zIcvCFBWIAS72Uw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.f7b8755f.0_1611175053100_0.042186798943394166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.f60de7df.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-circular-progress":"0.21.0-canary.f60de7df.0","@material/theme":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RHhU7il/guuhRM3e+PMO666ewN8n1qc2ZiFFxkQ9MJ8IrBJDQRfeakNWtpFERcUSXsw7rdNtiZ26SXiH8cwDng==","shasum":"dff2050f2a94bd14dc13586598df468aedf2189a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.f60de7df.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6BCRA9TVsSAnZWagAAbAgQAJsA+2OtfydtgY49nGfi\nQtduTdCdAt2eWDbAjwGfE/USpUNv9imIyL7AkoASlXDQVPncF8tzy2v8z77R\no8gWcnV2XHm6tL/gc8IlopMR8peLZY/KgzuPZnB0Dh9Xb6KJpqkP/eE2hwM2\nNrgwbBdXFe094jk8VNZxreng059nNzozcEvse/LUnpFdvJ5vBotS8ZkE1ith\nvvz7sHNh4fo/BmxTr1aqsC67r9JEOrDGU+dtv0GP3uZlfdUb4yEgVy0hdqTK\nYbSsOqD5gPv5iVcWmqW2a2/BTKW3PY7VGsGS0pXMAur4OaUgGzaBPXifJSaT\nlqWNCVm0SWV5G4ne+m4Rp8CfEf1b3d221xJoPP3Um/wkQ9rWsK1RIx+VO35Y\n+fvgQ0zNjJDKOr9qVsTCk0d2P92Zlb6Zw8mXLye4w6ti5YYHRAcXQWGtFMq1\nmPiK9QBlg7LMSX2pLtj8PZtJM4IdlY6vO1q5aRtl12uMWpXW5qtsDLysX2NL\nKmCTs7Sug9mKqDqoHdQRvuIS4ElZ8bvf4YSQ0aUaqRybP4H19/PE3BK9nR24\nFjJmVWn9caXFw5uaTTXLeJhjKPS/okdAVWjddX0HGcKoFjWNf0zSmye3/CfQ\nKQID80nI4W96W/v39h3L7AXuVS5Wb0jrUPmTkakE/phtsIOZqKzJ6+VIjCbr\nmitX\r\n=rCMm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvDgbVtmmniLoSFtCdHKANwr7zGuKFRSc50HDc6TFKdgIhAJsoOQQKR4J4uYuAydx1Fl8/hBCZd9K//WU2rU3GUXSO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.f60de7df.0_1611185793119_0.7004384519562372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.664a2927.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-circular-progress":"0.21.0-canary.664a2927.0","@material/theme":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Gw3U4TqFRZkTZF6BAbNZIfEqVHVl1VT0oMc0ySIAAGRF/XgIK+WjKT4gmZaXgFB836T1m/xzOpSpGtdklLEbKQ==","shasum":"685323165e2aba7e2fcd0b068660e8c2c5a7f8a9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.664a2927.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdODCRA9TVsSAnZWagAAPd8P/3PJsolAODdF2MI6zX4W\nI/hY9YNSZlG+VsQ4onOgn4T7dJ56oLY60UwPVMKFYUVDU31aPDuWAX9vvBZX\n5cFwYB9J7kWat2idKRiulQGmVeEdbMdUohlyD7FuQnzYyfY1SJ/MgBV4FX82\nC+i6WQrTb9Q1p9xzfXaeSU9AxNScSNrtQMHK6o1YdarT7ohh+QZbqu/uNC9Y\nkD4unOYsvNeXiGSApeiPIraeXMMCewVZk99IHEM9cTztHjX/yt/lD2Q2K9Xi\nG3tVGECnz2FnZzR+Aj8HyUtg+BlE9kfmj7Sq3UDIPMvv0s9+ldTYBOUl40vi\nhLgdK/pz3Y1K+d5ahQkJy/AfAK6l6sSSZSc3sDhco38BfNa9yV8v4Ltawlyj\nYh+/06Z5HOUcvGaPHlJZk9DeHfHMgrK+hGdiuvw9rcFY/7KDVOCNvcawJiIl\nU24FSkdWfwJhQn7qtSBQ0ScDdnkDOaT2/jdgkQPBFGXkNMSKD+uCH49ADWy5\nD2JB0N7Ady8QnYN4pP1BIve4upy/ClCRdAvV1lE/6Hkv2Osbyy26zA8WOjtt\n/MKMnipBT8tCPD+6p8R6RfzBIVDYTUudsArC3JpavTK/0lodM9rxc+zDN/G1\nH3P9SJoGHu/Eop/WKZLpv2/ZekgTDd1JXaoZpSTetF1za18JPl8/BiqEtd/5\nQ4kq\r\n=yjew\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcIe6z+AXD3aCxN/uqD+5dejceCf9ID/2RLA2QeWV0ZQIhAO/JxYUTLvc/gSTWqcy3sf4as9TC+Wioh84kkkrpR2gL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.664a2927.0_1611256707181_0.5483685145495891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.a6d312e5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-circular-progress":"0.21.0-canary.a6d312e5.0","@material/theme":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RlkboojYkUDWj3PHBI+NtYOYIoaiu7hW2ZpLzIFOK+qzvmm4vBXFo9HywyHYS7IyWE+zDvxbO2xRo6mZv9m2IA==","shasum":"e64c252748fda303ebff802fc14f3ef825861695","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.a6d312e5.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZsCRA9TVsSAnZWagAA9Y4P/3UeseAod80KPfZH+6z0\nqoZUN8ELP6RgKWjAr5toXxG0genUQLji1QzHoNkl+Rouife7H+d29jxRiYuj\nznuPvpQGpV1rKatAjOo9HbiObXsVQAItYR8MLVajhyS2eponPU0XF9yzs+I0\nl4p9en58wU7/eB6r4uKMNLFMfcKBIMn6BTKDGW2gaDL5F/1i0NDTa5vD7XOl\nMVHhQDHbF0dZbc2kRD/9jajr4OgImEA0/AsgeiaMYfAY3qjcT8vhU8PrIU9I\nlF6m35eB3dDYIZiz1I/Lx3Suu5fO4tArFeoAOZEXBUbBRIhQnb1JpaGcyGYV\ntsQy5na0kbx/OpcmQhs7hBNJr0BxmZwarvgQt+/0YDjUQRYPr+A+vlmMI04V\nQy78SSBkCMPCaoCe29OnSqidBSYFYhSh0izOpWYNhGov+MwkPdyaoRQcgyro\nLtfgeDi8BwqSN6tJrpmdpsbh88ExfA9aGIPVFP67ftUK4t3XHachrkZoAw6x\n3uXQWqy4h8hoy9uUhxulVUJKaicZJ3vhbMEE+MKAX0PJPJr64vGgNtSl523z\nSNXZvSirePsch/+Ka/S4F2eOFmsSiVpRHwdqHuaev1ihCsuQPgNulrWKk6di\nBo56NPUDZMRxd2N+3vxf2hLAmsmzFLTSE2OpnT8lXtBM9enSSQTj2fpsW+26\nuRSa\r\n=1qqp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6ILvpWwuZVCfQvUF5peY2d11OSgTHKSH2n5xB9KO6EgIhAJsc6vjcXZ0FzIFh9T9vixaiA69tu9bNKdbWkY/5CqSQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.a6d312e5.0_1611265644443_0.4769483690362126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.027365eb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-circular-progress":"0.21.0-canary.027365eb.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uyCrD86/LQZq4uvpeab1oYBYOxokw6VGLONBi2OXQXV9SdefQAcOmCuwFZk/ciFJ7GUYExdbYtJBFSGWtVZMdA==","shasum":"b9030afe31c621c8ff9d6c6cfcd2b6bf8c039910","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.027365eb.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6KCRA9TVsSAnZWagAAP1UP/iJ8b/9eJpOcUoYRkSyL\ng1u0CSivT3u81k0bAc1eZ4cbvlual1D73TzbBP10mJhF82vN5dA16adF/8fl\nByzcfRFRcklBthlz3+v2VnRCngoPvycGbgohiDoxROZ7kWwMocpNsAVPHyQx\nDA1xzXYHo8j6pMlYE11RQnm3KcazI0jVhwF4vfTe4AZiaALU0gYMpJbThK7n\n06AhNB5G9Qku4ZEqRAjp0W1O4rmhC1eW530VfsM/c6szSZZCqyntLZPhP8KT\nB4QQQeifMNphg9zlD6IEaPXsaNr6u/XnqajyO80S4Ro8U8xt/ivIJO3g4TCv\nasVQGs4wFSWWVJZSoVnJOJKPSI0sBQ52PkmVqesC41tVmU2z1kNVKF2CzKtj\nj/xmSZEh8TZLYbOMlvpUtZO4vXsJ1Hl+uEiTo18uq/AX17jn3JDpcG5C9xRl\nnoC7L0y0mfo/z8bDZm8G9mI1B1DnM9iyVeRhXbv2B9GO6ujXFYJOk2V6vIPq\nlZ2UIdsUDe4ihjs+fSzbq7g0JN9uts9aAkcCEfi+1rLxoGwjUxijmndvMcri\nA07FgJekhMqm+Aku/1pKXMcqiZMyCuy1oj+v+VASh5Vk9L2JJPDC2sT7J2kl\n2o+heBWPKkdJAH0KlWL3Tfdekvt1Zd0Q1oH2u3xpC4TKQVi5wkNQd+FvnL2C\ndbIW\r\n=VLrU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPAo1rR3RRaIq4isRhTmtHf6bPtN6la9jjICgSAW74bQIgUQflvpBy4oWCxU23+Q313pTNsYVoSQGAaWKJSB15BYI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.027365eb.0_1611349641854_0.040377736506006734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.7e72b66d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-circular-progress":"0.21.0-canary.7e72b66d.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8YAuWAb8eKx+9VdQIjK8UTXWL4V/aiQykH6IbJYq1chOv7+b4Yw6gEZadttm/FL2aE6lJLq+CwdygZdhDuEPCg==","shasum":"6bbca3d8745f35cac208135e11e9ce4713bf12fe","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.7e72b66d.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18dCRA9TVsSAnZWagAAHz8QAIdASBMB32IIF7l9uHSP\nxN6LuejeIDWUXnW1AdSPtvW2aKZY3RUHfD03xRGI1kXKNomK+Cmkpvcxvnqf\nmA9Zztur2C66ZPxfnDKOfpGTpVjyt/WEQAbyA2ED9lQWd0yHvj9pfoN/eQV/\n6OcfkmTZmRkWrciju12EhRSAzb3WiblK85MhJoOaiSKwVin82GvNgteZlZJG\n7BR/z8ZoWZH3zpKJ3wen0zfLMxdliVsMah7UAf2luBYYV3c3hmmVSPe9ifwY\nK79K7rlL7seEE1Og+yTuCENLz6bcd++stg6ZO+nGr4gFgVBX5kuq50xNDR8F\n8VNO3hGgwJDRS6aSnyqoJkGefD99hMiHq+7QiII4rEdQgpKhy7g9MnQr/IFy\nky64CweSL9c2eFf83ZxecsHkJSWdmoPf6VcUTKcXdBMpJZT9zjTxTIJWPTDV\nOJyLUohPpd9uACLD2MBjtxuR7/QS167TIBGH0k7Jg1+ZSs1UDoYwaPGdntH2\nIfj8/vbMCug2gvdBO7xFQCmuMCwBNuTWYDs8cHwldfyLMSpqtviim3wqaONq\nMtTCxrMhBsIqmV/FM9/rvE1d8VwIYepu0GKOjIEjUaReLdZ1sLgD/VNHJmuS\nlhU2VtoR2xOngVZGkgoXl+pFR2CX0FFIpTkZKPDZV6/gw6QVLFO+Nxbw4XDx\noh0S\r\n=qFMA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEiM/T7PKHIlCwPYlKItc8FEjEqvNfung3O4Pv1YWSCQIgASFLC997XOsRvou2Zhj1fYf1UubgraSIvVX1ik5KBAA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.7e72b66d.0_1611357981100_0.8219089180825605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-circular-progress":"0.21.0-canary.a6d6a1e7.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Tq0S15OsRYAGZN7YXvIdmdtjI7Ln0+3nV39g3wTyRKEUOsE/RDYxgShP80Npw4duIJ69nQ4DXNkgiAsSe9ZEww==","shasum":"fe26038e1e6bb7dcdcc3e730ed4f3a92bd7c907e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CZCRA9TVsSAnZWagAA1KIP/3ub5Tf9czrYjpG4TlVs\ntC31dD+rXBUAtN2Prxh2RqOg5VQmqlQRH+CRlSuyZG6hb8fYf38nlrcg7nLX\njEACF3Dgum9B1vx4LwiVc3Bd9p6gnbHhFNqOxNZ32EERohD8bSZ/YZQtFbr4\nvOKu8Ltb3ec6l3rmikoFz9/1uhZCQg+n8IPEWcjiGFIuQXv4g4uVFTRnLIBN\nAZT99K4AGvPJzRBq1XzM2KntNVIkX95f/+XxxjVUfQX0vTEXfKgd+uxp/Tfy\npbVMLKLJWzV60/yQb6nRQFfNwALZmS6DQB/2TN9edj+75z9CRYZLenTHqAZV\nTLFTPoFUQo2Ac7btjNcEp0uJiD5IYRfxJAUHDPmPKr2rvwt2pCCobCTSQu2e\nKdM/bxzXXpQ4kwznkjsDZj8uK1fQ7HhM6rdv/xjxdoWZXDZpxoy5lzJaL7uZ\nwL2uG6QdMvhTPusr+QqZ32uPpuXb2Q0w8knaVuVp4on8om95J2fspERnjp5W\n3Ng89cgkLQvg9NXyqkb+7H39Bp60R8Qoed08MD9TazAUZhIpNZOrre0py1oi\n38nZnG0Eqpk0yEVH3rq3sWfCDfwrhggyjJgamjApZzj6r2Fj93zJXyeJS9U0\n5gYsA86ICXRPfyCnmvM5kYU2jwO9UdPS3wnb7KYftMKRhfbzMTxK/6d7CX/8\nA0qI\r\n=9Ru/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDybjYXpzeYs+TGG60TwJ8QF23L3hlZN7iRi+4r4PVzmQIhAOhTQP9R7dD51JUUqAAHVO5+i6woho5o/vGfDUG2eToo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.a6d6a1e7.0_1611358361340_0.28763139323995235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b95fe100.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-circular-progress":"0.21.0-canary.b95fe100.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JRQbrj/TjDJlXsS8IbHf0giXoQtAWc0qznrtjEnF5wLL6+uU0820F0UfQO9gcgtmWxIl28BjXANK6o3lx+5e1Q==","shasum":"65547f22b191e9bfce2e3ae1fca84d6ed2d061a9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b95fe100.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2USCRA9TVsSAnZWagAA1JYP/2hf2ZYPfU2wdfFfnf3f\nTSjd1mzajxHOTuKF6YUSoRzA4q1DuG8l7GUjzScMhx6YWbgFPxxwuCrnb68U\nH/34VASa9fBuNYIcGaX02cSu0AifEbT4vNgH5GK27H7Wb939GwiEyKmmei95\nVK+mvqyBi3j3sUYcY2efInD5DJ1VTKfo7vidUj7QqhaheBo72GmM1unpsHiF\nBCOH9YGUqEeUSwZtm6+ADt/zImmY0zXpZNw33ddrTmMMhYrSWuH3jJokv5Ky\ncPlyfiCYZiWhQeMHzwB1NVg79Nsdf9BEQ78zezDRxIgYNGUggkQ5EIePaiQE\nS5RLjGVcekD6JufXIUh4bAos4zyC693dWgKTPlFKRub1IP9V94nFjQV09488\ntlCarZ7Pql2/YPk9UEIY6MWvBNcuGsxvemZo7FbpG8Pc5dhwY5i784mtcK0X\nGrxsJPMDKn4gAEmHAxOuy8hzMt88NyZkhVDd7ddHgI6gll3xRsFjv95xdcSX\nBjrmhjoqpUGaiKQSQaf/xFU+mNZH5PPqDjBF9ZipW8FXTO5yNxLOSGZb4uyM\nxuBc3bRX3KWOvjprRdNR0kxOGFwLnWyR8JU5Dk7TRZXU1JZAVvr6BCIEeCvf\n3f5rHDOT6ZDjMBISdcD5nmH/FEUzJ06+GT7nOj+FZpfjirtdITfmb1+Wlrpt\n00w7\r\n=WsS1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIAZvAfT3uA5Qsin5leyuk/e/RKZegYAvtHYt2mWUqvk5Ah8ySTioltyT9zzb2PrE8ti8E3q0Xou9z6kWjslZhzWL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b95fe100.0_1611359506463_0.28144300971998026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.c8797192.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-circular-progress":"0.21.0-canary.c8797192.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KaZfo2sIkJ80qBhsHtNLWJk6hmt7mz4dqnfR04F/xiyT41ucvhLRXm48n81raotDCddY/iKeDzlv5hCWy2gJWA==","shasum":"5179f229d8b90327e72e3a357267e47aae30a273","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.c8797192.0.tgz","fileCount":16,"unpackedSize":42914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2itCRA9TVsSAnZWagAAIsAP+wQA3J1WCydW30bP+pqP\n+PDd16HjmNxbQ0npKLx/NrpaPIe9kIK9M4FXkrv9UvyfxI5qwMmS31oDMQTC\nhwDgDEB62XpPztPYREd6exQrGqIk7+rcZU5fhJIWnVfUm6U9j/Frwsk3VgNW\nKMWsilLrzK1JZMzwA362FF85y6HuKN9CE074p0Xtcu8mUmCFejD0bRXNproS\n8MC4oeE+opXMIMFTr1mQKLQ1UiHM1exrNW/p21mo09mQIQfrjjO48PpnupXp\n3hR65ILPZwzIaXIyGu7bdNwLXbCyFUcaqZd6PratlIvGj1NrzyGj+4dWl8cb\nwFvxoPK9tIgv4lBIEkbTJbLyQkJuQnRvueDYhOJqGY8p0SB+BkCNfQxULOAO\nvaS47hnXC09jJDVjb1qbdBWxWjHbUJL8mahppI+vsYIv9ebJB/g3kb8ku8St\nWSPR5VJL1PceCccAyf/c/NsQ6UeU/GwHPHkaUpjXKI1hGJmw1ehUWTYHuiMk\n3dcUKbIIC559u4uiZu4M+Ip4HrD64sTaCt7hTdFTIe9WVlwB9XmMW3bQupWE\n7np943vL/91pSGJtKhbiUiJgeFJoyhm/J3wgoifvEijDyWvcbXUxTHUV20kU\nODexHplF4GELNHV9Rm2PkNYaWL+NcoBgL72QEQCm43i9r1UxHtMFqljzAx9A\neZHN\r\n=RFu4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKXnA0BA9E0E+lwLBGl6M1JVP8orIjwzwt1wa5mZuyPQIhAK09jKfjKZPqIPiLHU1pSKpDk+zRiiZuBaGVZxIOcmWX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.c8797192.0_1611360428803_0.2957168878503107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.946f5563.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-circular-progress":"0.21.0-canary.946f5563.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5NwH9/zzi/GISLqCUuSIUi2JXse5OPNbL5ACt5ngqwrsOOXgM6tqxPoBxVs6JQyhzr4Rd8pdpNRAswTNDjhL+g==","shasum":"d79bceb0b29e2e68d81f6a85a34059081a591b60","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.946f5563.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EuCRA9TVsSAnZWagAA+wAP/0u4WOF41OeVxwR7Kddp\nZnBqMNczCkOHhQqI9h73uoXenPO0B2gxOtG36Ajt/8h05HTmWNG7TYwWb1iT\nD2tk/UgWJ1Gszyqdnh03j3C5d5ALJqy5LHn8Aw/ZqS6WH7mz2uuhxPPRE7Yv\ne0rX6HURDzAX6XEBwSysenYU/U1ItXKtLaNrPpdlJVi1LHrJKAsoXyk784bs\nsujMu5/Ix9HiABA5TT5VyLwjyr+BGBLjp9DBXf3B98bytETRWTzBUliuTsdE\nY69sRPv7bzEYPdOrGc6bXovdeuM3/GlpkfBYmeOa1DbuyXZg4VjxXE1HkREF\nWwxAdXndqREvOF4lEkA0diueH8BEDyoIZKceIF27ZzhmL7Ks0v4oPEywSMP6\nXBJ7mY486AgRTn2LVLzPqmMxAYo4k5OSmfLOgvFQn/WVuIIJBvyRV5Xfl4hJ\nikCoEdhYM24LvI/zlZGO6f/eRRPs0A2cOkxz5uPhXDY7GrI2rxNEjaaug4eP\nBepmb6sAffQwkymY4Ooasdpx+EQ0JQXG6ZGvQP9RztNCZWvT+0rcnYyWLtoO\ncOIrcOrHJnMNcUGqoaAsSTElLOxUJv0qNUA8Vn3hHYaqhuHBFfRFZuWf+d1C\nAVUAtVa7CpbwFcKwZ7DY30GHRJa7P7BuPHhJqPc5kTD43XMvcec4Xlo98ik4\nje9v\r\n=CFYz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKMVSzDJ9XYU9SSlG7AniqTQWqAMsOQin05DlaxZnJYAiA4dGWjN3i2/EBEhUD61m8EmJ7KrHdBp6b9/x/OHnSmJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.946f5563.0_1611362605853_0.7450276571089733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.43664f0e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-circular-progress":"0.21.0-canary.43664f0e.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IvqWJ9PfRwC65QtMI7ir4az1hbejgPjKbZJQ9kpk9kNp42A9qhcuaJ9Fq20ONqrcwmdGD5Q46tb4cUgx4NvOuA==","shasum":"ab2470ae2107350a117b3331adfc6e2bd3c631c2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.43664f0e.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0i8CRA9TVsSAnZWagAAMXgP+QAMuu8MWqbyN6T7UGzf\nrJi+DOYScLJxoVStA5bUQSCpwmtLwdyCfWwJiblHGDqXlxnMZdCeIBBtXRDf\nj5lzt32jXfngZjVnl03k5a4nzcHJtKUyPxVxkTsBTH6qa1TbRC9Xhh2F3uTt\nm68atpg/wgdmEeuakQSA/B+HYBzrUZcytrH+rcY/72E5pRk116PmrHKWI+Ft\nycP3Y5w/ehTE9PwqM/yKEgD2IW7K5FTtjmKo2cvprN60fF+bIcwHNbY9guCX\nZH2pweMo6t8OooP2so5bom6GAtEAnAXLgPy7lYciyk4FoK962EMg9kWScV5L\nxJLXNZ3OnQx6RApmlQcePogTZVyuwUOcVa99b+ntUaADOTUTxzgKOnZOKyM3\no5EGIMjRbMn4Gu5R79pzprXprnbFxtaPurCG4T/QO2HK8I6F06np1aPKB/nX\nmkgwicVsLo70u7p8CTdC8NAZgokaV1frvqpyJ0ERryoO7uAbBzTtUHUJlQO2\ncfKnqlHv7JUPTlTBoVxVyjHleIS+CJo/soE3x1yEF/bYPcK4vS6zFguxXhsu\nXnv/MEZjLHfMLJLMGJ7dpBUHwmcBTmexQjKu3N7alWAn+Qu/KvQsJ9/cTQae\n0b7dvXvcld+oOllwlwn9cEc9A8WQJ6+GLz+dyOLZoWUkFx11nnH3dBqArQy1\nXlks\r\n=GABu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNdGBtABpIOVXcbcRAzwAdPk20OngxlVAULLyNY5/WbQIhAOW15yg0ebUw3eEhREZ5wEqbQYaIRAu2mqmQL7pSG2hx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.43664f0e.0_1611614396481_0.6335545441885293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.2e769e3c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-circular-progress":"0.21.0-canary.2e769e3c.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MDPrjSrbIcHUOV+ZRUC3p+8zNCWmPwZTVxWwP8gxQlE/n0Wtv9osIJ4RuUKcfEVwGcqsN8H10ZXK1ZA4IIHCQg==","shasum":"ae29a46d00cf132328fd1fb9e0c151151f19b738","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.2e769e3c.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zwCRA9TVsSAnZWagAALCQQAJ83nHKlsZz7Eog6QDDf\nlnELkMmhTko9+P16PC1KlaakEAFC/T5NpcEF6jjeQCKhdUiR0yYWuj/LTkrZ\nPdysgX9vtC7LB/hKV3v5CzZZXGZh/ERk4lVPeJMQprJMeW4fhHvfklgjmBIC\nabM6rmCzGURll71aDNThpyoYnLZvD6pSVX9N3BYXcslmZz/64u7P3xbzkrxn\nqIKj/pkX+nt/YS6fS/sQG2FQDT1jk+8dTjzn11SLR0CyLLR2NI60Yfz2+Aka\nYtxBQjapB+a9ZylMG9oSVO+qrJwRgjzl2Si6elp78yHrNjcbnenun6q5Uv6K\nRNAXPdXEJgRkmlJuUp4bzqnelmnMKjzSNYhkeWM6Z0uppJB+R0Li1apeRYYo\nFDXGQCH7AedELVBR2qjDu3LD0e8wUC3LQpL3lWYA7mI2bzP9KPlSyYy05/SL\nh1vzyUWpMIZpZh2ATgiHFA112B2TmRZmxY9lhBxi54xNUPFrCQ8xoNV2pNnf\nw6zIcGAW7QluqZKTA9rFxKNyWkG8kGOcmKL5GIIjkIlGD8FKaHn8gn80UI9L\n2HMQEfwaPHnEnwrNvZxpViDk3xuhgTHe/NPPnXl2ynjI/QJgqE+gLzoug7GO\nNl9jIVq4OKc/HfNnVLvpkBsIJjEr5HDkQJG86HpxDIu0BkKwvGXFALoTTqnf\nFFiC\r\n=vwh7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFOtAAM4ckjNf5h9LsAyzJoKLP7FK4w+pitLKS9fP0KAiA3ImHmfJ+uQZKzuxGMcnoRgA7/NjCzxGMibb+OyFvHTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.2e769e3c.0_1611619568383_0.2577841296474426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.14e01610.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-circular-progress":"0.21.0-canary.14e01610.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tAitgwo76IdiWDqkvsnMiZwMSze5NAaPBsrYq0ojfyqiMlzGL6bMCwOxDbpWSypd7LoTXheD+3QDlfYo/LQ3Xw==","shasum":"b984804971e1c55983cbffe2ffc623d2283988a0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.14e01610.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQ7CRA9TVsSAnZWagAAmH8QAIeC5K7fhczT7alBxmZ6\nfokperSTVZMqCml4qcdf45a8woHo0srK56SAzz4EhhxZRAL/btnITxabYwLU\n5E6ng3ECRCOVqx/wk4s992jNkaSIVvb1c+anoEWXnO6AHXsjEPAaYTwOLoj+\nNtH9Vr8mT0n7j4uU4Hi3dxfNWD84YkGM7q2oiOpMyzLs04Xtz6FnqKMsaPWD\nZa9z5reNe+mL9WXRLKrB5wfvBMALM8UeLK77pDppMcedxdnbCqRkRJhPnfiS\ntzzwF3waGkhbTFSIag6dIyrx/QvMF9zwmrsYxS4g7lbyXeMxJN2DJqrG6lKS\ni64YGDLW5/DXox7SK5Xr3JPKmkMK4awsAUjUzcCA6VTzkxa6vXykqgVtfWFe\n5QbftHzBimk8QzfMTN9OxEHuBUBnnUwX2rDXCxJW4t3XYAKNAsjwH5czMYW/\n0ssW5XJKMEa/xsEaFxGrZFpQw577d2YsMRrXDpDglu+J3I2OWVBV3oCpGLc5\ns788kXbWz/q/U4/P3vqM90uhWH5dWps5tUgs/RKsIR8fxKASJFJO+BixrbJs\n6qOuOMTdmI17NGvBBAKNg84ncGxQ2sF/xVWzZltD3U5SwkawZ676/Qa4pGvX\n/EGxxEhgNqqdTqObDdotH4VdgCYNbioLd88sH1gXXWvjaAgPc/iElB/yONxK\ng2k8\r\n=h9t2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqFlmmdVham4IJxsJY7JJiKn3/hPTJNqwRdIcg1N9yIAiEA5IWS+0q02SrTeG+8fIFsgKe5NceVBG3xriv8/AaZsxM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.14e01610.0_1611777082563_0.6772006680980771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.5de00c1b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-circular-progress":"0.21.0-canary.5de00c1b.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wuKWSx/S3cMNAQgCLKEsVC3xL/ugt3IMpeP1a6kyedNDe6NM06fsLKNHK3Lyt/8IO5Ej3AzR8DqU7iH+8bnGvQ==","shasum":"342245a57414e66640ce2d06f486e40f86811fe5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.5de00c1b.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEco/CRA9TVsSAnZWagAA6FcQAJ/YD791VfzQOPA1QZvL\nnms/itRtuYPqpmCgFgVaDJX1CsuWM/d5FN2jaQLtFwbp66eXCOex76tbtfYa\nLn+GlE/lDU3qtqy1351Tsre1shjSBkgpTU4IR0yWrV+BapHEAIoWifioACkP\nro49kfIS7GlRUfSGBMuXPSWrShRH1RvCxd1RNha5TyTqhuy3rCKeRPcQRlAw\nk6kVxxJCR0dj/LIThkAIdNNxmQJ+5BUoc9NjCseF1QCH0RC6OgC+L44QNcIV\neRo51iVXJtvH249XTqAC3FSb0UCRurWfS/5uT0Azhf1s9GVVLUA8hawFmQUa\nNpwavsAZ63cYZDltKzXWEGcrXHnnMa57VLeE64GpU8C7AkHxWhnyY/uF6dxi\nrdb+vSHyy4m+6S2dred0a2kpWZzYKsYbcUV6E61r1ftdN2c4aSAAsaMcmTX7\nvwg0WosFfmPmFWUZOf04O4Y+CijeFzpnfYIdwKZD5TE79fs4tfJvTd5IVFkZ\n+wAKUygQWkPtNy5WUtXNWdpO0hVHbeIspITcl9QEMTojPGUlfp31HIJcYPu3\nnhael08C1bnqukle8oxjZwzz+J3tXenOjvrZu82J2LGRRaXN4130lhVwfTOD\nenx3p5HwpfJkjgD38y+/av6qlbU1/rPhICfrwE+vYCoCV/mzl3FgQ6mchG9B\nBtUi\r\n=4UXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHIDwieOARzyPIK9WLBLMC1lPQFhPKLS7hjLDauJPmuAiEAoU/ZuFKX8BhxtoKJml6Yv98CoKGy2GrEp0hQVYQ2KHw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.5de00c1b.0_1611778623509_0.5574819583467394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.5a328336.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-circular-progress":"0.21.0-canary.5a328336.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5vFt4T7dTby4wikWHdHGIZ4EqQB98zaRn3G6O1jr4Yiwk3+T/SIHLOO/W/jIufUrxWHiKspxHexsyRHo4L5Jhw==","shasum":"c1d2d932f5c7ac61ed191fc4553111aae97fdc1a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.5a328336.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZ5CRA9TVsSAnZWagAAB9QP/323lCQ0zSPNTbopXkck\n511ODRslZLzCLV8bK2Pt5Pxwdo+4vDIFv3V+TEWYw/5lUo/8/wrTWMlXoVNB\nfEZa/mb5krFUNegMOxhTecTNdw8NfpX4YtQX/vBEIGj5kcKJLGNjxf7CN0ec\n3Mk85E9QtqGp3n56JAAdRRyPXDPJPm+XfjknNE1u3bn9G+F6OY/HNFnIiAmt\nMjjWNB7sws+/Zs37wAuM5SqszVyIKcB3e9U8S47qn667tjR5EIAcVeX6PiPC\nJOvCt8THzd+4yvQT9kn4STAMkmICDeSlBFEGg737Sbxf6j49+qbfZyWLYW39\nMwfnfyEnnSxXPAYSj+N88smZfAj0a8Qw6MlLvkOHaizr9pdtBRgpRpIQVsuH\nbNhQfhP9WIO/WwGEAHadgLm7rUvBYd1Wji1So4pWfZbnfpVHudIx4mtL412l\nhntLfNc6AqKjnSRVrs9fnzUpu7sseTn6YmL1VihtbXC11sUL4IsxvSqoJX5H\nexXGzx3qR2b+Z0KdfxQBabhJBVqsmtekSJb5VCjIshu1WCfdWSzThzHvYxgK\nmQiFtl28jzcf7qBWOmH0MfL4Usk0c9KgGvSslVLWRpJ/xw1qkM1DOsYpRIFr\nlwhKm2SGib3CoRWmjW8IrSqe/k1fSdEUp7PCySF3hVsCXyoUQj95DDYiOMe4\neo0z\r\n=c9kh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+IOSWTMRKrkC0o9a2oVqDhxczIaK48LnGQw858cxXaQIgctr2biuqvAnB1e3hP/OkqtFgUFMFX8H4JslGKsOSvd4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.5a328336.0_1611863673284_0.09628440512655612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.533b1251.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-circular-progress":"0.21.0-canary.533b1251.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-hwdJLpZ5HelvKpCzd1j6M/Rs/Yy12tC+pz+pbGGacez6GnZ9zvIrr77GEjjSU6Cn36SGNKPZowlX0dFfCQt0hQ==","shasum":"c8aac69d7ec5965fe1ef278c5de871166a49c5c5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.533b1251.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWmCRA9TVsSAnZWagAAfVEP/3KaJeCRPv7nHdBDfa6A\nGp847hoU/z4MuR/WO9rl0eYZF7png/NJ67HySvH3eIWfv0LqAALmlGluadeD\nJeqodvK5Dgy+pVUHBIrl5hjVwhG9KJA+dTBEIqdajaVPRVxMUbSMRPxqhT6H\nw5ji3pipSec38JtXdkDRGW58Bu/no6tle0l+IWkDIaTDwpmq/kzzQ16WO4Ai\ncG6oXFiuw9TqPU5vnFNFGqbUdIhGbGK0zkV7seMbDApgLrsi36SWBZaIUG/r\nRqV0yz/uX4asQCjquPXIsXRpM6r6Q9ki8UDjTRSbdh9sVaGdY9mMqjeHSNa7\nMvC+z7UgkTKYsg/d4aW4rl2TmlNuSciDydOk4pliJl6Bo17gH83MnCpF+znu\niaQ368Akpb1c4X1b7zv5WYp3dcT2vx0n7vGO985CtypIYfAml7vqIHXLcRsy\nu5RBtWA4lC1IuEdZUN7r188MEW4iSpYkAaDVZu194vq05Q4n4TE1dv5wDznd\nMGgRkuUQyiKfAfwLr+mksCsa4fNUJ6X/m5vdR1qo4NCyfbRt4TKsPcIypc+E\n0vfda8G7AzEyZ+f5+u4J9S/8ApRNSCHK0sE/USJ6u/niHebMsBECHZFJgQSl\nQoLY9t+jR1DSc84VS+Zp8sTkt2B7d5wDF7S993QcWDGNb9/PBfmeRVhi9fJI\nrwIH\r\n=nYKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAaR5oqgSPaNaAP5YmUfR7zEJjJsvxyv8jQL2eBB/4TMAiAU8tHiDyj01amoilXBjSx/PJ/ojER22F5lHFgsQ0WQ/Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.533b1251.0_1611933093524_0.5907946882496944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-circular-progress":"0.21.0-canary.ab5c0a10.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-91lvvU+bmJPAK9hwEbFja7wEUY1JsFGvwkXFbo9oFwIJP3QXpx0rby9RK+fd/de062UDI2R5j61i4z696Gn+Tg==","shasum":"efe7c946d04e02e2107f0c9f53478dcead5454f6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.ab5c0a10.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNSCRA9TVsSAnZWagAA800P/2eqjRfI79zEDoXvpjkW\nbJgBk20zNRPLWC4AIS+4IZSpLfGlbPziSI5Fgx6jpXnCtblL4nBgV5hAXito\nDcIBeumwKLloQ1epeaHDh0kb1VR2pErHKA3E1X/dG/eTiQUqOm8e6LrvR9q0\nQImM1GnHQ9HR3Ou2BgUmb1tki7Qt0nUYOIsKKHeiErAX0e0HsjQhnmHXMa3P\nIWL8kBwi61h49yIASu627jbDUprUyNxduzSuNFIk7bwifoeD0SaLIngkcw1d\nqlGR6EO2vNccBKwE7KTeZjEYCHaRFYrBErHlX8W1ECVTMIMIib0IgWlBAmFE\nj8s2XcuCOAGeHw6oNRaiR1iF+HIx4ugCeCFpq0RygAbcZ0Plp+SK22e6kFJo\nstsrVqFyIC+DV45mTzdNOApK4CjO6y5rhDEupOiDul1adKon7LwyLj/jIzRp\ncvDZ/BCOC2rrU6ALlWHKNUN0cEtXCr76kOXEzVd6x1Kx8l9Bn3/kK5wr5ULS\nEBF6ThBj5ac2RiE2C9yk6VnCJHjLXGtAsI55ZMzLfDgeLnYQ7L6SxN8dVkqV\nIryILuMlnAmpAZCzFoROJiC3WI1LJjcMmkZET59qn/OjOk/MTmaEhS98nhWG\nRPbp0rTfma4t2NjCFLLu4nBIBgTLolELUXZruOy/jOS00aWAZSo4VKBjK1U0\n3Djk\r\n=lcRS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSZYRHXVU9t5hpgzqkdHF1E5X/2/CcIdJVfkpXNRiG0AiBhKu7Pp4Vb/+K1+EAfc2Ta+MzI3TrrWm2JnauMZp9SfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.ab5c0a10.0_1612297042156_0.2454663353118829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b7a40b27.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-circular-progress":"0.21.0-canary.b7a40b27.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-x+KWKdsG2hY8r49zGQxlGNOIVhyECWFARn9rbjHv+hFNNxYMhZhuALOpmEYhjK2dRQnqXPFN0ZaukAgCKHQ4UA==","shasum":"b65949132a8ad5c489a67f17c502b37ee0305a54","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b7a40b27.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtMCRA9TVsSAnZWagAArbQP/27M0xSbipFJqzU2YsdT\n/mbpJ7RSB9iKev9hcjb6fOwv4nu7eaMLAcLsyJgufJJohpdo4TVMQ8Kv24Jm\n3iOaBW9EcyttsEX9tLIclQlFLLTfChabj9Zc52V5OsR7dgmd6duGuKxcxzme\nuWqNQMqvEi5pZ1XB9wduEvTtLXiuOi8/Kxw1OPLxZ78ydzm2tMDZlWtooXU9\ntrpDkeAqENqMBEefclWVrKmzRptw03o5BetcsE6Awq5ekXLx+9jD3HXq3D8b\nPcRMxZEawljzNNTss/m6mzPKm765DUERxMUqz8nh+e16PJMkEL6sDkHEoPNO\nFDCtdMI3IAqNDFLdB/ztqdvMOI3EWnVjiFlG9PMwl5GCRcXQGOiYikE9MvwL\nPIKZhlNUjhU1ZzyFxcb0Ey+Zb6p7E42C2aM+0pDMMX5XP+rAlxiJoCdlUw4C\n0VibJ3GAgBO2brbMIhE10AFQwbODyomZxNKEvsa+mGvK3DjpO2k2kVx1KiML\n3JUjLJtcQjlVAe3+VniwzB3OmC+0nZ6R4+jGobGp0Ld6WkvjAVkVfER8mC05\ndt8+8bDdl4+GtStltUyxYYLxG+r6jOPicEWt9zb22NkPmAs0IwY73/WzPUXX\nVwF93YOitirdrZtnf4z59uIgG17p7L3lum18lkq4QP5D5ggurakq1zQogds7\ns8Lu\r\n=7B+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUsEwzmsyKVLciVQHTPW7AqXnxCdx8xru33iyd+3ITOAiA7hwZ5NM4/+LtSW/qurNurEaWYbPBUvM134u+V7MY20g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b7a40b27.0_1612364620393_0.09945969465893278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0fdee204.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-circular-progress":"0.21.0-canary.0fdee204.0","@material/theme":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/ZshhG3imHrFb5JD+69qU+P90wrLoLKg4eYUXuy8MXAA8JP3ptMkJ6bQK0phvVSglDu/cw/vcNlDd7f1GCWMLg==","shasum":"ef99478f9d349d842b75b135816db116f9a3f240","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0fdee204.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyZCRA9TVsSAnZWagAAE+sP/2vdiTdrR4f77ecPaLPw\n02Xj64mbK+U7/moQz+IBIbdP595Dz9XDqX45b75+GkmmCcfXeeZeDgt8skJN\nc54bt4q4+1A9A5btKueutdVNMIt+l45NAmUhH6OrPFFDGGjE7OvEf+IiG8M7\n/G007AzNQ+7DW9rtjPoW1953To/GHOnxNHWKg8y07c142/4nL4PoIewr2gN/\n/mxgno/dMQr/nY2NASiJdy3/+1Vke9c6XsWNZpsCzjmf8zeB3dQ0yr0a8Ym4\nbHiWc9PlX5SHzSkAS/x8OZLDPtyIZ1b/ybBwxYiNtX00oWWvQF0SLHLvU8Cb\niLDMjgMHn2agjBOGeWU/4E65/ez0qUFtJdMIebX7415Od+cP/WFVWjaoDzlF\n9Tc2hI1ShaXYFS0wuoJ8QHOtjH8ZMbpei+238smoRwDFiJP4GIXkYxlSwAI+\n1UGkevv3rXvvnLtVayWffgOXzhUIhQJyzuZQSUD3RJXZe8Tv1YtgFhq2ute7\n+ZBMR3oLWcAqcke7O+NFMAszqf3WBS6yvhRqsglzJLt6w5KcZvGQfYfq14IN\nAkHjYXueVmoCLjYSo0UBZ+L5unhVrT7bjl6KbBTpPd/N20DeOlJQv1yjRy/G\n3JJ4kkfzXe1IwPDo2q/HYlqZdNxegd6hnYzr2ri07WdJer81wcCVW0+PUV7L\nLSzV\r\n=vnTF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5WwZD49hUJ4V2TNaAOmIv4HNIOx1A+AcJVUP1X+aCFAiBUMS/WgLAjnDTtbDzSFRS+/OYdcakfzsaCfSf4/Xmhsw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0fdee204.0_1612377241125_0.22314632744579233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.5160e548.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-circular-progress":"0.21.0-canary.5160e548.0","@material/theme":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-0W8+AvspRjGsUk5lfFQt8HbD9f2QY71BU9dZaMcFwvN7cGduWFHXxalndJyRSsnRnvyN1Xtn9oOaTYLx3QlqLA==","shasum":"6d5fd70744e4d307ca9e0173993ceb14dbda4943","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.5160e548.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnwCRA9TVsSAnZWagAAz0MQAJtg7kZg7MrHUCAXUVb5\nYuwm1rc8aRsWnQ3gEJFgjV0t/kdrIVyMFY3tQ10CsA7bUbriipYbbroL+1z1\nJzCayXrE3mE7uWa6W9ruuI/M9JxWGbefS74bnb4whdBQ4sBGSEFVdJgJbjpb\nkoarmnP3SqCFbXdzchZ6IFV/9gkdrivPH45R+0VbuUVPaO/fceEj8DGeR2az\nXZWBH9W06c2sPEfjXdFLCy5E84AvZf8NqeIjU315Z2kBOoiGzds7+fqkpsHk\nMcGmaNr0VHZQ8y4XzjlW3pYqfRj8DIFPX8Y4jE7Itv1gbQtoAFjv4xBukczb\nYs8jK+44ZhslS4v2IdFa7qVUeRm5H+pBQ7ucjmoXNvpPH+eEFMpb7a6NZWK5\nKFTAfXLnY/eD09YicbhEIlZzugPLbjdNE9zq8bJUaQmZXIpvrP/4X+AXw2eh\nmw0FeQ0dQ4f9CJuqm2wnYsBqyfONKYVIO8AIUy5hmXgovKtIpQExu9ye5Dm3\nfDrRiNifODfPdzS+YMeNWPJLZ7d98iiqT7fU/bdORSy4u3ATowmJkJAF6M/1\nOCErC/0242oBCBEOWcRNqM14NaaXmMGKcLGJn0MtZ+H758FpVLEFgdH0md8d\n1hoLWAfP8WLAkCTP1Fg/incx/2IYDXZV3p03oppWSuXKp/doTma73m9OH9l6\ndyzh\r\n=MCHt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxjJ4TYuh5H+Rmj0lkgMx6yIkPa/I2q/wwITFF6mWsygIgZEYnJnS7v//KMCrgkoAVaqP/ZVsbjRFLQfcVwLtBwE4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.5160e548.0_1612569071836_0.7052675267990689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.4fa2daec.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-circular-progress":"0.21.0-canary.4fa2daec.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-+RbutCJjcuNLxqO6qo00sQQAKVjRMIHo3aLcjrV20GDhJdOCgt1dKL7Pc92FVz2ZLoAB1XsPJ+v9zNnUQhfcsA==","shasum":"c7801dbcedeab480772f36a2dd548ce6855c69a0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.4fa2daec.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTYCRA9TVsSAnZWagAAW7IP/2NXcE3HMcmXU49iImz/\niEVF2BH2ZgfCCOAbd1Czlh+6xu4TGR+QnT/GXCyDpE2N89SvHShtFgXq1VPH\nD/JC0Gg+tJ2nMKPsne+mzjRZJk3qNb33j1PcHSifv47QB3GLzQ5z8Bb2yDHQ\n95ijCs71NyYxgq1+U3fXDXRuVXnScLs6SauV5Fbo/AzWJ1vuE9xUxiOcHJsw\nJ4KbBh8GYf7e3O/Hb1tjwhwevVV5nxohZiZxQ+c71A3tyrqECOKnRDHpctT5\nMHq/tdrkdYPUqw342nDMwPHXQC9JYQ5zPTZjO1yzW3C0OB8TgR60Vm39F0WN\n0wLoK6fCX+jpGXUpsqr9C3fBypHgc2pZ6eopfY2Fk5STFe61JqP+o9Kl2RH/\n4kHb+5RVH7Ag9aAs8mqc8FjO58iz+YicNssGlIAd3HIsAQzqMDtVeib9+FsW\n+lGex8TOoyM//rW5AeGHMHCsYrfVE4olzO6V4uXvP8M/3oAHpfU67mYNDBph\nGthvN8n8Vs2tGwJ709t5uD82dNz4bJ4viNkLvLvHOpYaXkkN08MelhdJ3be5\nnEZ/xq5ZMOeA5QZjrI+iPMvgqtXPDAP9y6n9UD7Kfw11vZPgqNVFgdjIpBBe\nY3GUcJ0dYf++1gzJXO+aKmjbcsedvtMX/2ay4piEhiUcSoes19XN9YvXtU95\nVpQJ\r\n=zfs/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD95ZGEaBcRpJQlRaUsav6wdq3jxZqkGhJCHO9TSemFywIgffVJCOnc5O9D2T8Z7CgWhMKzcp9qUayuwOQHtZOLiHs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.4fa2daec.0_1612829911587_0.7728791844877085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.67f285fb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-circular-progress":"0.21.0-canary.67f285fb.0","@material/theme":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-+BlFosb1JBaonS1zDQMMukenVcYGg92KIPiaafbqPYPsxBPRwWeO8TU53MDzrZx+aO2YaRzap+dH00vxIFW7/Q==","shasum":"83b2eda424e705f69572794dbf0323897e58e756","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.67f285fb.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxwCRA9TVsSAnZWagAAzMcP/R0Qct2HVyBdtBnEAiLL\nvpmgLN4/P9Nc6/E9RXzW6HuFckKayN7iWXFIJ+CvRZBz7Im4p5AVXPjsqQOW\nnI3E3Z7RJqBw9iK9qNHQ66duQJsyNBjAoyIKxnU8zunhCpS15JmzqzWpTSkc\nlB1x0z1X0PIJkGUfqBQeYNbcMdVX0dUQ5sXST17RwqXWVRFE/L5v8MAJn9+G\njuJT3ijWNRsmg4zM8wzEUTWAkzMSjF/al/yXtZN1KY6Ef9EZTqgu7YyF1v/5\nEoZEYwu14iieYB+xm0pUM7rmy56YxhAF5Wyvb0AkPpCKQVnfEzQ6W4v+j7Yd\nBiF4sOPYavhDgenkPYHwMaja6KI/j58Ld9hrHtZFl6oBf5NQ2TzpEt+LmOvD\ndPVLYeUH1fHVAg1/D8zJW4c/2XQ6t1km/18p8y6tjlixq6WIGRH4KioxwA4x\n1rZ1cg2XZGQ/BFuiVjjxtkL93dB28sAsL963MmhVpaHJWI0BVcWj5h5GHrad\ni78UhE/C3nT7OPnO3fAQ8hx6mov4ORR3MyL8a3lwsU3l5fmkfbCsuBf30MC6\ncjzuhEMsG+kKAEdRD7miS/GTrRkQbHVuHVeFwETQObYpfKIMgpc4eJCwYQDW\nVc24YcyiM1kzXA9GM5/oe/MV0dPqWvR4y/7AV76x8UUxSARjfpzFmcarIfS0\np6Lv\r\n=Qx9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwPkJsWTsrIMIFju3JeEoLx41C9GkCzuDpoARw7fT/MwIhAMC2WUWBSYzGs2kY3S/TY/EwfIyMsRZPKGYGe0+6MiHR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.67f285fb.0_1612831856378_0.48084251397789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.58cd5a70.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-circular-progress":"0.21.0-canary.58cd5a70.0","@material/theme":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-lCZaJTbSBHuRgk/dl6jtZTV5jl3kpWYx5Jju7H9houS6LfUxBaegkk6qle/BoSXOQr1bDB975d6QQ+lZeB1MwA==","shasum":"a08ddd8fa985b6916e1c32b86e73cc86f8fa368b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.58cd5a70.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZc5CRA9TVsSAnZWagAAc5wP/j6yqwtDx0QvAVGcT/ni\n7xCRMMv7h3vDK3Fb+14BMG0XW3lzvJrnkyyTiULzrjZwMdQoBtVVi8P1ScYM\nXU2siLUTpuGlNDueOaX8qvAD/XGRQX9vw4dSE9SEflCEH9vvWM3RYYkap9l+\nvaHU27lbuuZHqSVuc/OEfZTfLlw9R9GKbIEwbdGZlIEIxHtA7S5x//o17qzi\nTbruwsKs4VWlgpce2Bvbk3JGjDu6sQttEUi5BXjK5J98VtpNrt3mtydQ0WMj\nOF10CsFWJffs8OYJc0MBhE5U4MoYayhRg5zypI1yLFDI1u1NPGEu33vpW6A3\ntaeC9v3401GCXosLzLezogKybOyMy551cbRTLFnfnJWur62ObRPHEeDNC+8I\n7sin7OhbX4yMERjZxpKzehc8TXLazvCkyrmViaMy/TyBdjN2CGACwgAzmr5e\nRvGjhE1HrjIeSLAG4Wk+Ajvy9yAUKrZvmr7kedBgzJc1wC9zLu03hvMmAa8o\nDogDd27ivePX3oMIlz21bGSO9FrEG9hTAbjSewbmD+lHOAzAUzU85tM5bDyq\nKp/vaQT8CNnwVdGQw30416Fa0Fecc4jbmJ97djU2OvxMpBKPiNcW9YDyIkNy\ndWZFhI7dBo1Vj6NLxi+b7FM4+7bLS/LkCQOP3uG4k8dtXKakbEh1H/lPOQ2K\nFjdf\r\n=l1Up\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgrCcFNqebXT3yZBsZsGER10zWU/V+yKhBZozAHxRS+gIhAKSqYp3E1nZ3G+kN61Mbo7eOl6h+XEFlMcQyzQoBlstQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.58cd5a70.0_1613076281473_0.17055065970174144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.8107ca43.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-circular-progress":"0.21.0-canary.8107ca43.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-xw2nqOYvv4fiYFGIyzZDKcZEjrWnC+dpk4PUIwsci2fx/5Wt/uIDR/oiC6nLI3vGVXg0rWXWGM65KzOXlvzFAg==","shasum":"a9217be3bde7ca213f6cadf1b6313e284ad48391","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.8107ca43.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2xCRA9TVsSAnZWagAAfP0P/1V0ZGViKdOH1D6dJ9c3\nDOItlz9EXw+PIg7CqLCwC4zlyyH3+aZwympltP81OPLHYu2v2xqUvWwbtWFi\nNajgPTehEms/KQHxqsMQPdT713vSO2MBeQcuwRGwaMyRaKBVJGxo8KaA/ZmS\nqnKd1bd/BkRcEx/WGjHHLuBamm/uZ9SPnkG2cNA+jBCNSHo99JRuJ8ni4Re9\n4tHWKWp2MlCRuy5vOwi7BgZH0g1MZs6RKL1jaVeAaOAuEkftmMY/RFzOd/Tf\nhG0Dyl1dk4t/i1mauaVzJ7giiQ1gnAtHy5P4RWVuaVHBsOcwwKM9zy79d42n\nzh8fOH+3Rj5UULgH1HCIlGnL4AikJ3rx9hHxUhE1ldyWUUlMtpYyvA1Tg4GV\nFxZ1MAXeNpgzx5B/V0yHbvfRiLjAJS/9J5H8O2IRheogQ7CkwfMg7fl+AJXO\nG8Y+LCNcSfYoU0NlEGclXggp1t1ad2TaC1FDI3Yvfv1k497WovOexLB2e/ag\ngBQc12lFHErShptxVL5PEgvIEkcvo8wiSj+Fur7KKZI+ev4OFhVsGxR996iL\nAEj6PnqnfXy5v6OOnOFHMu302INZ8b7/jxD2ZClIYFGJxVwGN91z/3j69fUK\n5uHfDsEST8Hne1YyUfWpQQTiXJpY62Nv9eFq9ilsg/a64n02KEM3hPJhADrS\nRF8M\r\n=4H9o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZ24+cRJysUkgp07Q9/GKJKmR//cWycUWim21D643RIAiEAyZU7TZXedNYdOYf5ACGFA37tdev36t5Nkv8XGalj1cg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.8107ca43.0_1613086129487_0.16168769309596476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.d35d64ef.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-circular-progress":"0.21.0-canary.d35d64ef.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-myv6aCVQXlDPFUTqUT9YA4MW+2qEySpTIpG/fLKg6TPaadV0fynj1s4O3S3RXx0zbUI1OSo31VoTokwwOrMyFg==","shasum":"3a3e69af1302e255439ccb316ae6b6bd8b4b6936","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.d35d64ef.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEBCRA9TVsSAnZWagAAY8gP/RIE3WS0RrbC6XchgwCP\nq19LwcaDkYrYsxYbPpOJcgMaVEbmIAxPXRffchk5nHrMTpJ3bfeFUyK2qa/y\nlydCwxhAO+krA1XH9thm+7Cj/Qu6IOCrkLN2QhPSHD73mBWq608AOcSlTAes\nN6RNoy+zCnkVWLnXNw7A09BeWMX6KsF8dhGiIBN+9/PPq6Mjj/KME7O1Un+w\n/O50rTFsEDMVM/zsynIFiQrt/lqmZGDwvZJCCR8qwxzLMKXeBDzrK4CItwb9\nMIph1m/o/owwB4h4fcYs+5ocalJsx2ece9/p5DwSGGnrkgiZf00tCgE+5zA3\nX7GoJ3OJTdZN6FlTLNUhUjPUyw/BA10+uJyEO4BHrQvk37ciL8HlNER+Bouf\n/IIHFhQNKrdy38OSFaRYr46FuAq5dwmXsruaEDtuXm8Pj+go4TlJZmf5Pus9\nxkQRwbcH4ulUotjh/OFG6nh7l/SxBHuf4JyKNDzwwlM1sZtQ6s9QF44vbp1B\nV97CHbD90qvwZcHqLAtiwMuJZuiqeaBkat+A96e6Z6luIpSmG+XXVSg1d3hs\np7p34ZLDCgunfVq0Tl+7zCCZ3FZz3IGlC1MlKJU8hwPZVEeJ/CXstd8+gfjb\nyOGYMgp5QfeX5sxZK18PHZm7BOB7r6CRETF1qOqNLBzDhE9k6YtMHrBmPy2u\nca/i\r\n=4xzP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFbwPXOx19hFolerUubUBQo5FlxQG+abXzX5S1fFia7AiArV24BO0uOvN/rHVM92ZiPUhgmsbX50NNC6ZQEDrM9hQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.d35d64ef.0_1613086976992_0.065754100096856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.78bcf058.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-circular-progress":"0.21.0-canary.78bcf058.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-IQnAwp8xC7ISWID3fOzs1pgx3Yu0hIubSBGo2gGlaL/tOri8c5sQ3zeBN/sWFyao2Ab39B0hXA0PtEjblZ6FLA==","shasum":"9db47086afd69b216c8eafa74cb83052baa6e388","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.78bcf058.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBPCRA9TVsSAnZWagAAtuwQAIj6zCAF8m3GKWbIRknU\niOM0vjwlND5sMgg2BPdmSRKvGiWjf2JZ32E5sgHKexC1E3ZqVKFSYdlFLFZi\nYpJWOghsah5sNuPFgFcXf4FLp/MPGcMkEnYry74v3pXRoT1aPlUK1R3mZH4i\n7Y3uhgy5tEee94EkfFzE8AMNVY5b81rO3I/7vKfL03WkDrcMVbaF10Ny3juK\nCEQdbOYLbw/voXAGE+3CF17oqiTdW15iEB8vaiSqBPJ3BNDup8y/mzE/lFSs\n6n5YdrW8jxrvxNDns5Vt4MUPFPT0gzhF0mcYFZGbwQ9MHQkbplDgHCaMWTRx\n//6oedkiSNS/uwQ3QQyDged1isSGXabpmJ7KkQb3wgDm4UA5VBPiZTMI2TH+\nL3OGd6KMhWA0DHAkKHSPOBLlA28qcCp7ye0oW5aETglQarlQAoaBXE3dL68Y\nSaJKQIo1pPsA/FXDfyyBPd3QeZJzouAS6fdzrwkKZJA0liZEqd4bUiY5NeMC\nke2Snp8Ulv7UZak1f+rBxbiWhDwluhDtgJgOn2s4I7Qp88cT7x8s1UStkNIe\ngvPLc6v7OgRxGi3xApp6zT9mx2PKxe4Zzmcui+B6Wmqp/HuXIkKF0Hi8gFMM\neQ8ozdczkv9H8n/5Deg62Cu6HEbdvmV4aOyNK0uUhXYZhYzT2e1NA9fsBiND\nVVGt\r\n=nxDT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHj+++wQg6h4XJ3Ml9bhmMhk4o1dSr5Wumf7ed3+sMRSAiEAtOJuos4yjDRHHSGV385nT3E8Y8W+VC6doMQ+T+sUsos="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.78bcf058.0_1613090894823_0.3828158613606587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0c6908fd.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-circular-progress":"0.21.0-canary.0c6908fd.0","@material/theme":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-VUTaS7OLwU/2yxlZAMuoMC0yisOZtI+VBDTRDisIP17S0mIKekESbYQmCz+JjU+IjP/NTZ56G2dtHy/P9QoNHw==","shasum":"b972b737c29f9847c8174eb7f5c637bfa3cf48b8","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0c6908fd.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjhCRA9TVsSAnZWagAAbyoP/RLdS8BI2BptrnQGw91K\nLQC2wKeWv3TEUhhLjmvvqRukua5fDX/l9t9WC7ONsYWak8ra7a6sc5mTA967\nG6RC684V1lUegI9GFglMpRvSKtBcC2OlifsAuS/NJ+2CVBb5b7ipBDly23Bh\noX4gv7OfgSP0LQ9xK/1Dc0feEwBxcAhlPJeBaYAZArYUVxgcP/lFzSwFcplq\npaoEKv6UQ6PCMnkZ+UWROtq7XZJMw5DnzRBXlo8+7rYUJYG0sl2sU1PkYDlY\nT28nZCyZY2GvwP+eoYwxwkUxkP2xmzX7HOSfKX7vzLPf2Cx3t8vE1c7hZnzA\nOZ0HNSXNTaYCXGI8t9UDAw+PHtPUlx3L/yWoVhreF0C/ig9pBMR7e9/Jn9qB\nVQ268S1vpG7DF05SPoqMfp6BnwnhtIAKcJSSlMijMx+9/EnxCBiIBT1TXG1p\nM1eBvwCtbriZvef+U+2AasD277ENVrCWigKZv+7jiihQuY8cXTOem0sK/7Kb\nP9hEVbftE13okR+CG5v6yDV0NwEgfzcWtz98Y/kOkPClYeVmfL11OMLAeAp4\nWiuBF8cqVMDeApvMRI3GUgaYFYOUut9H38sXmcLRrKDZwm8t5qKxxoCIZ1P+\nrLit4xi8bUzit327H/0k6c/CVn0QYiRT2QoOBQjBWJAkqfBGlLUCB7CwRcUm\nl0jl\r\n=ApA+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB7SZcuvzv/RY2tz8RSLtz4w/aTFJlkqIntB8oZdpakQIgX+t+CS2IZ6OLiEYbuzVy+v1bsyx0Y++9XtCzp8hLru0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0c6908fd.0_1613093088808_0.3663125784577175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-circular-progress":"0.21.0-canary.f1f34ee0.0","@material/theme":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nu/3VO0Hdh0X8131pD/+3rmKJBC6kqYJiSCUKVsZM0co04bCnOXzbwr2S69HmgVUDY8tY7R7QVuvEh6NYQGgxQ==","shasum":"fea243f8b2817cabe9d105dad10cb4bbb179876d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.f1f34ee0.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJ1CRA9TVsSAnZWagAA48EP/RnlWGHd9OMIUcmoxQLw\nPw7dbrRX/yUiUsk5MlUzoMpwdI0TCgkmYqCggIbM5cZVvsYXBAkkYpVg9moh\nuQS3Jxvmvx0S9KKbUxdQywJLBG0m/lvow4uUhUrBTnC42kFw4ZfeIGpRS/Xq\njCWoHXhgJ5X+gtUu/DdA+eivYjtDmTnm+e1r33epbN+jEiSCXYBaO8GS7Ikp\nQA48Vr+hJ8Tsz0FRyWS9jgjcxMISHLhNBV3FYIAXFK+KuHdzrNbCf15mMzNM\nFsi0cUFjC1QSSx2pGIFw4jDo6e29dhbLOIuSODWNMgLqw+KsHTHtMqCLR9lE\nHcpMuvV2U8mRFCh0Z/EdajOvVGxAfX1HQllQdW88Zt2hfmccL8Nd2riWTeCn\nPFHpva1mDaQ66wGlEoUAklEb1fKmCHfsbShKy1J3obRoDuh2ZxOBpgmuI+cp\nhXJ2VA+Og1sXndg5Xc9QfDkfygiENgfTHOE0vXRXzlazf2iEEVsD9sNIt+UP\nQJ5IZ3xObv9U8jHQ+CUZUFplaSce6iVlJdNr54fuj8hnJyPyWyEWQAJfqUvP\nSp85eRBHyVmxJgLfxsiwRJ+7eTN+iQ3CryWipeH2K40uSYWW57iwqPzZre23\nUNtb5dAJePPb3fXn9ZgQhE5UFfZiGqzjp3dyzGxfXx8rAnjUwdRUS6NVhcxi\nezc1\r\n=1gHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6NIPQ3dUOI2yWXr88vvbbT0BTXSBjQwz0VmGE1qzn4QIhAKiHoVKibdB0Urgdtlbb9kzYsDHz3yBh2kLnncGisSXu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.f1f34ee0.0_1613161076696_0.8416346556781251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.d84df029.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-circular-progress":"0.21.0-canary.d84df029.0","@material/theme":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nBWaDLBCcNOfTBijBZBZLOU7nrVC8Tjl3IY5ZxJ1SQJnUGeTt9okzN02jzcgbpViKiLt3OVRyHbVqBQ0MEBPBw==","shasum":"dda40c702f85bc56febf88febbf7d838f9acba50","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.d84df029.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgRCRA9TVsSAnZWagAAOAgQAKCEtJwIuXUTJEiZT/2W\nHDsVs9JLzC4lMxEpahWMy39tziQoUdkRFcjyYEp+vQjr616FoOu3Rve1GhFE\nXojT081aKy1GjP6EjJDxCft8R3qoQnc7pzAYFHjl7Au/2yeRaS6e5DUBO7YW\npXMS2Ly3khwpdJS67fGLnDed0H8R2YnPAXXyJZ0Vnn7MgPvOzxsfwiiGVeK8\nhMcwjU198RUq3W5lXytNLzCSk+REYpSQdVt/8FF+eC1wuXb1YOhVtbT/TWZD\nfP6eOkT1dNVNXlM1/xOd7iV6sHY+jB8ksKKFptUU9yzOYY8T4DJAUsjjVnY8\nKHURs7OHKqZk/5MZO5tpUpiy3kqCY0mXFFwMnYPC/UoIUcn+BB9f1/+GtOQK\nfuY4/Tjp0Ok6qn3qPGiWvgJadUwQ+1s2fFhWuF6aA72HTROnJEbhgaNLqmDl\n/X/4H9CbOBGbzQftLwEypD6Gblq+dNZagUO7bFFM9hwiKJJUkjQuzpRD2LmG\n1Ip19bN30RmwUQ9mSjh8zva26iW7vRGUZNmBDKp2pR11Hyrcez3lJ+BvewlR\n0+ychBk/valozenfICnlEuiNHf9JF57uub99glA0C+Yw62AHquJ/WMZ4UMhQ\n5wdcFTomYuwqiPXT4gs3i4SQYsbwTledXoEd21ZROflEjKCjISnl9RoRvV6S\nwf3E\r\n=5uQv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlC4tJcbDQQuXfmWF20lbQ3zvdfZDL7oa6kC0wAP5BrgIhAKJ9B1NgsvdmImLBh60pX4cx0AU/v8dLoDRhgEhqZ3p3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.d84df029.0_1613502480657_0.784265233022988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.c525f471.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-circular-progress":"0.21.0-canary.c525f471.0","@material/theme":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-9cnM+uo3kYbTR46g5n3Dwft6veNsOhnVji1q1pPyLbEHyXOkL2Q7V7ihXg0dFwUOdBYjV99LgW74njpFXyv+gQ==","shasum":"35e8e7d2ec4ece259a07a9724d398fb7eb2f941e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.c525f471.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJCCRA9TVsSAnZWagAAkTkP/ApmdxBrwZVP7vtkl2cw\n9f9i09yyGDtykqLD7SIjepkAgHK5XPW0ZPy4C5mDVlPqboTdrNiQ4PYI1zEa\nYrFl5yS5DwgIP4MyH8/vAtUsYnJqJ1zWzdjI1N0WEM3liLI8cIYgLskvy4Uy\nXw/zEgjUvXh7pjdKnTEMrPkl7jba7VZAnyT8XAZD6CLAPGe+4GccVy/AMEje\ncyBTdS3dSU9OamMb+Z/pkB/zafVsTuyDQzWXWmchkaULI9c3Bpx6TRvM9qXQ\nod34hM80Z9V06OSyqaY6k5aFXE/m5pb5P5abbijg7Aci7Vh6uF+4bA8Qe+mV\nUSruAk8TVxvi7snDDHYstJbOipiCwpDlBkdZY40fb6sUZma3+EonZXKNrvLq\nvqVmx5FqV4n5nWjbsJv/bJstIH5WO35Wxvy1PvNvxZ0KfuYMoykJPnr1WN8D\nzLRpHL/sIuDxbcE9doCkMcL4BjyL6G3jyf9wiJ85Je5PbPw/FsoSsasZASI3\nbctB3k4OW8SoYwmphEcDDIPmk2FUN/40LjIz7bBWAKQeMxKir/rDTlpwCiKh\nN0BhaKK/BNEFIwcQi48UngL0kA8+sVCWUU3GLVHLpmyPsKCi7r2Iwn4xCXAE\nDn/u6mdidTWAol3VXjiYhr9i9fHxSu02OTe/aacVoWfqVnPM5B+ekgSuzylc\nNIzq\r\n=9Fxo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+1vJ0bj8LT35jlnut1T//x5WDJVTS25vU2v9CznGyaAiEA2GiOFbZcVp41CurerXkDJNkvpAFKQxt3TPZrlkQV7BE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.c525f471.0_1613595201826_0.33480452189074006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-circular-progress":"0.21.0-canary.ba7a1b35.0","@material/theme":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zUPRrB2qd0NFnqaEAaAUVoT5vzlJx0qchPZxnd38BLUoETYbrilSUUZAU9zkDXOEiGjBGhbM6uwx8dOPaxOzIQ==","shasum":"31f9635daac06db67b63f95d3b64be567cb3247a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.ba7a1b35.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwK+CRA9TVsSAnZWagAAwL4P/ieHdsXZjMMcUO/4IwyT\nt4nbp5zjKZdUnulT90yI1cbMIBdAhH5JYJnNnOqCvaAVw8h/Sn7oQVu3eJvA\nQtq0dC0vlHkIFmamG6H70vui+X48DkNRqwI4/VQWqcWNqBoSE0FG/xC5y+K+\n47pk3IX+REJYgXLzwW/CAgk9xJPfb7DSmGp6llYwoSoh6S/mcsn7hD9ejHKq\nG4O4OG/zXNnX5L1uN7hsv3dxSBU2HUnEiQaKP9TKqs4BI77ePuvdte3Fu1uR\nzUcND5o61HEFfy9JV7VJBBGG+YPDYpv31GrLnkhxguCt54xEgl0uDWK8llMY\n6I4fWMB3trAhYQqQMJkgQPzLqK5/3AWP4/R0I0e7d9DYpVZ+jQ8BXpVjkJtR\n5RWuJlKFCo5VauTXtohtK+u9pm1T7Dav1UYUtmHfzIMtOSpFpxX2zORM7OV1\ng5gLgrB6Xg/pCMMKc6tEeyaHIRDgfFCRp2cQ/s1LpKhqtmT1QWgg7e0HSvBR\nX5aHs9Yuu+QfcrtN+twLpz+2ZhC2eD4pAfQasQKZ3rOYqF6Dn18MSdbrPnBH\nIn2IcwbxBh9WpVH6UAfTg6g7gKZoqKAAklU6Fx5DoPEYemwC+S/N82gh3xDF\nUtUBSkzPsd65g4/8tfMO1GuCpsowtjGrvwS6M4FilFDbf+qzd9bQx/ZZIAnQ\nM8kn\r\n=Naj5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8g80bU/CNsNC+PJT9yaJw83KFQ8hON5rlCPmz6L/ZZwIgLxp4u7Mv5/zA2UVRRrV3ZaKk2CPZkCfiSj9tqWaMECU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.ba7a1b35.0_1613693630107_0.23239613190954023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.9a566dda.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-circular-progress":"0.21.0-canary.9a566dda.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-pNtvK7657WhjpEgxFegjB3S1EeLQiBcO//r/ehR+34SBz9BB2LLJt86x+3/DZb1qSAKPSScZZqHdnuqMlbPXHQ==","shasum":"4ffee97f9fe76d9388d3e8ecafddeca98b2b78e7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.9a566dda.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWCCRA9TVsSAnZWagAAWAwP/0l+1zlx+oHK/sysxjLh\nqhjw9LB59zpsh3IHPLZBTG2P5LqvZm9F5PX3LAnCN2P2/Xqb9CakfSvaZJPJ\nTqiTkqkUUtxi0R13jnWGdu6ofn0lPJYuwTzKYBR9PIrNVqjgLGzobRaYdxHZ\nsB0qqXj3VcN8IlF6Vnk+nuhXFD4Q5Jn766/39TXvMO1wgZ0tIsmHpkbTWU3J\nfv2SpTqY6sTcDoQ8ntHzreSFrZ9gZL43x8Bp0mSpnsDYOuFKJ/cQeu31KklM\nIYhUEdHuYJDhs6tP9NDcFtsvMCMbB7sXcEqEJZW4Y1cwHw6/DVR9jBCDxGs5\n6lAC4VWdmRL9viEDzSCns7TXmYsK9xWMFFeQA7m9KtvHrgP0x1TD/s47lGQp\n3iIVEFynfOx9t4MWwGUlZrAtZSEk4MieCEls92+Z2JP7SiP3Ry8QbTlqRhQB\n4UdUbPC/HcRm9CfzsqYr0DtuAeQ/Y4hDBqoLq+p6EtXwseSCQCeORvKv8blA\nyNS6ICZEbyxUDfCnP2JAEnqZPDZ/rFAjAdUVh3AIuUc2EnGQr04EY+URvqeV\nI6OEADOqo6sUTb3IQ1Jy9O8mqD2qloakXJbek7AFh3cr809+YniEp6ULUda+\ntLLYs9I1JhstxhVqcCQ5zZIBn64KpxCrmysNsWyC9H3tTtZPE1DVXCCidVdV\nFDVP\r\n=PCO8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8KrxdCnumKYhpblZmaG58/aNK6E08vi9FWWyz038D/gIgGOq85EqhGyCxh3kZG4245YB2POIAmjdn9KzV28Osd8A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.9a566dda.0_1613759873586_0.46801691209822693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.55addb8c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-circular-progress":"0.21.0-canary.55addb8c.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-8jtYgT5eYjhOdtgwWn1CqNg0AeUcegw3i6QIvIr2bUdG2VWU7NSVaG756mc8UgHbUbhwgfdOAzKjfo/6utJ2/g==","shasum":"f86005d5626fd4b17be100f6bdb5cc020aec083a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.55addb8c.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVjCRA9TVsSAnZWagAAjqMP/21mCDOLfKvCTY91uVXo\nZW9l7cC+iqw94yUvWjojLZDKV/StisEFsCjYJLGOUeh7K0irle10uAwTjMAD\nuAASCRUyTVJyd0Me9TpRlxc5lqNZv7dgoU/tf3FLOji4NlWp4l7+4fi3xOfX\nW60F0wKlCd1Ry1TEZq+ZJ8EL/q2WNYBMxtzt4iQNqsUfZwu4BKwr6iaepIXn\npB2ORir718KWpUTZ3YZ1DknXYnoEOHGCAsnburYURy+lMAFZuej5n0i1Un0y\nngJpkLCd17P64yywKxwlk4cHDIeWVQ4x2H4xQmPrg4+9tzmtluS3iv5xINZL\nn4n4MTtixIK1CAO9tMLxn+ZxDL/Smr8EBVjxi8BGgkMpIiyjLtcanbeOTDmF\ntwYl1c73YotFFrudNonSoplTSSHkkE0C/YZmOQFaiavYGxCaDio3WKEAgycC\nYMirpu7CKrAp9gpKJRIasn5Oa8WO+AONRwKEav4NtOm5Cq/CEZuE9740fjOo\nHAneBmrW1fEFwteuo2a/gwrfkIzw+omtwigxZ+TmMvFkv/z5Ite9ozXArg0/\ncn5v6PdBpytnSHy1Hh2cffcVzy14Ch+TyRMlKg0ClV++YrSLThkTHubiiSxj\nbf2Sb3Xj1tlvXjmVNBuzHkp/4k19YcujtJXNPK8oZjK3e3BNN+bajhvmzOxp\nJsUU\r\n=SAwy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsQrF8r8nTCBJX+NgDZypoD0JrJdSHIFGdLzNweel3NAiEAvs+T5Z3WQ4l8Hr3R5TajyHPRHqPBM6Nsrtq1HLAlJ/0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.55addb8c.0_1613772131047_0.8067590537600198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-circular-progress":"0.21.0-canary.85dd5e9b.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-vxzXyuM3Dvzlya3mhqiMSP1rgUCqnlewiruR9tg1bufjw7bgCJPK6n5ay39dY/YV+kOc3ncltJK1NuWVe0Lrkg==","shasum":"8622354ced4ae39896a060abec711df84cb0e1db","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.85dd5e9b.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYeCRA9TVsSAnZWagAARO8P/17ppSH8IEY8pw3Fe4si\nMVld0FvcJoqoGjYUsMLsdBcQbQrQBWtCZsTnRSqVSx75VvfoQNZ4SUfW256g\nqcOAIuiTkNrSqoDROtoCUGvmGagMYZPRKGIkB5rVZYoJkEkuQfs0/NvwT0oG\nYKuYHh/rV2Cq+qyjiKjYAMjm3gYbhOJCp4lDmuMDhRH9uE/ySxBbO1vkpMla\ndGg5G02168lX5HsBXTm/LbZugp1c/jk0SPOgu3zwNERsCCcRWGnrG4CkHIdC\n+LaEirGlmteeCwt5+WQLVSqD5Sepd5F0U+ZkMGO2F0QgZqlcSXYKPD7HnAF6\nFzmK11vg0u7tdNjlXZFBxj50pnwVqYB2c2RH5t9xsBuO24o85PNVeSC2XuPA\nznU+Dw/WBtVHa4ymHEZI+7C46Xm5oGuzxQ/h8isG9ngwQjDG1F1HTUstbfcM\npmePWgl9SxvUNjRpA0RahWVqmlVQYr7MMJ5esgZkkcnj/VVhZzGJ/ql09KuI\nuDgfkOkNYxOuyF0FoRXrI/MRw9euZotUF/JyNzdko0enfzeBpQk3eOOdCjmB\niexoAmt83I53Wik3+kwazPlkO8S73/9uKwDwsCnZm8ybUCJrN28NqkG4ta4o\nTnFAYc3Khsi1fXAf6y80TU6eTLvcM85wr55fojIRpujMc0Dz+W241ygLoqlx\nSdLJ\r\n=J30T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg4WyJ4hv7HllCqWCF3dWLnNYQTjvovH3+nUJBUMyDfQIgBV5PcYW4ZFJC7tD1xo5yfoBw+7oVNJ/iU8CADNyfS+U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.85dd5e9b.0_1614046750375_0.2827634690683092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.aa3e078e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-circular-progress":"0.21.0-canary.aa3e078e.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-jiutB19zSAgbqqi87HLJwxkULaZTknHmc6So4QuMMq1U64lEr4fWnr7IKLMlY7++qTFleTgrnogqPGpE5ML+KQ==","shasum":"1f13592672e95da4c0c54d7954a0f8ab4c83cd33","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.aa3e078e.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgPCRA9TVsSAnZWagAAsDAQAI9tPPZe6w9KqNktXQJ3\nm8NW7CSTmGZUh8ADLz5Cc3wScaUs0cxgk89dIXPkuinUVhk+XNsLnUzjPUlX\n2zOdL4RMD1PEOg341Tri/Jei7rNXaJ7OHCEhUkkw37Mik5lBskoZmDQzoV8z\n3/5IWdYIr2mcqUHXLjubxbcuGV2LMZ7GA1ZAvOyx/nVmDASbTQ0jerh5uGdK\n3SWeT/f7rgXT/3opQlmo6v7FOlBxMURGOudn/JNdYxP9WBwJniq6smtr2TwS\nZfep5/hD5j7bkPxqkXND+/FidxHl5687re3ZiKZm4s3SEiZfiPM7mSzDnfyR\nNgkRD7IzV0ctipLbL5QfB9EZguvm0bdeXSU86YbZIgzmaMEsyLr8+6iMxJwU\nTXQFp9oH9LAA3eG74tIddcIdpB0LCWGa13gILX9Cv9r9JnnbASTGomSTnnmQ\nZ6zSyUYw8Qwu72gxvN1L3F1AZZ261ip3Op5iH/Oqs7who0UaX7RsMcnp1ieK\nJ3NkuWmFLRhbbbSMdRU63vjNc72siawyZ63HeB7vE7J1Pn+jtwZ9q7IkQurU\nsxeDt8tsn+dLqRSRgvfyVmGCRBxnaEP6pwPLdvkdtxbin8X6ytozeVu0qlmJ\nuWM6lDdIjJzxFVUnLELfRBqlKZrmV6Kbp6rjkVOCUm+CRe0+Cap5P+FVW2uf\n4FUj\r\n=wuii\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbrZYe/mGzYpIAAHwOear0duy4U18BHYz+pTeWQpMPTAIhAJBYoO4M16NaajkMsGQsXSdGJueCz/4vcoe3Wvbnvkgl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.aa3e078e.0_1614100495401_0.5738432023662305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.dccd254e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-circular-progress":"0.21.0-canary.dccd254e.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-KbOAaUZ5lYWOD+kUWfRFa2QueiStOpzcPrhCgUXMZLvqFAjNk6pziKQCQqoII8Yq3Fu6Tqoz0AxlAVF/CeDHAg==","shasum":"671abc19c08f82a897b047c884ed7eb7236cbc2c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.dccd254e.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOwCRA9TVsSAnZWagAAht0QAJblD97V38B+vjGnL5Pn\nfl0Eztd6R7XWp3X7CmUAYlyEJW2xR7b9+jkfUQnVIAFYAotteIr0z8PHmAP+\nqOfpCk1Sk+YXpItDZHtneFBaSEVs0uy5VPeWe4fg0TEt9sIA7dFYIB1gqiW0\nRloWkoUIpbFmk/uTpY+joeQR+Hohc7rfuYwhDu2mXuaBB8euys9gNzre7EPZ\n8vgo1eekffB4MbtBOO5G4mVpFwcIXPduuyxs950l6b05O6u+IXUDNgLFdjVj\nKX4VbLbp2ojkgPQD5QgAlrzUCAbyIQFlJ6SDbuofYV6GuoVsulIDVN3H+iDZ\nSLQ7JFLI7xlkR8OLETr62UalEkijCBLBtfCqVgGDxOdewzIqHMGlZF6qWPfZ\nZpZUFMTgk/NcRbB/zbrEGiJdCBqFyqiOjWlQL6teFJ1azaxP2xHdJYhNTFl5\nKJOw7e9PDzLW9SoTnWknDWxSD1z4AVRGhuQutKPJwb3wD9uBjJqLbHSLw/7x\nlzmCJoHt0dQy2j9iNBVEVM272CZoBqd78aUt9O0D+YeSAfm5JdvY4HbrxQN5\nA57ujwoTYtPyCpKUMFELIQ7T36/9KZjQEHSG6XICFiCCpbFFcaaSXOPMxp0Q\nim2MWuhhT/0WEhiEmvPFIvU9rJ0hJdfa7sKqHBHichlKna6LX5orPPriKOzh\n4BaW\r\n=M3Os\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCovDP1wVDCGvXuiIxwMv5JuNgKCUebuUSHG7Dpq37FhQIhAO2qa3D9R1QuDvs7ix6s2GHkzm6j45+p/ohhbiCa+sTw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.dccd254e.0_1614373807645_0.22386560276177803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-circular-progress":"0.21.0-canary.7dd1a27d.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-BRTKSk6VgVazdgpGHY9YfKNNuh8vC3Kpq6peVCQhA/d4V+FSD2TJeKknfyCIpkdhd1Q6GOC9nQZ8L4eSAWjh7g==","shasum":"add9c0cabecbd4a1d3f1a3fc5162b5990b3247da","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.7dd1a27d.0.tgz","fileCount":16,"unpackedSize":43017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQgCRA9TVsSAnZWagAAyukP+wSQ1LPc2rDD/QD9NiZR\nQCNb0g0VEz4Qfb0/NomWN8+9BIA8lWMeDPsNtJ6qtEAQX94B29pf/xAVXEfY\n1oETJFroK+KGjsaXG9BVXTeimuY6Kqjt448u7C+gvxLgAGXXKyV0m7jgzEst\nhVEamHTk7YOT0ib7eaELT/DGWxFdphbTosTGKijvyIvwC0NnxNX8rzmlQek4\n7+R8jEXifaC6MhbdpNp19fIvYktk3cs0S8M3KI/W1DuOymDMrNScPttmVQ7U\naJmTcGq2KxfrJtd0x5SPMCs5CXI1xve7b4bkJdcI+IAyOGGHsVghB8a6mLzG\nC+bX/LJgjMfuhK/Fhq8g/SYAUmEPcHrCHx2jRSCPsPDf9lpcsZyyI7grP5ZT\nEArSnTOnhIr1PWBGx93i3JdwHxuOFFNR+zxaHEMzVFkKzTxuqJpSXN5IHl7T\n2SYZNn7XnXVEWUuibMKqq7Y6k33yv800ktdPoENPsD+RNmTxTVhue+LmJJ3g\nv3fqdtzBQ6vuK5haymw0hMEZ84BuGS5HC/zwpHa0BgLQvJgSLO920jgK5C0R\n9QJudtgpCpuIxP8qiU+ndTZaqzphftnW0bAK84e8XhdzlxcptueOuFcVRcrj\n1xd30JuQEYNBOoq9GXPGaiW0s7hEjdwCpEN4fNOAlVeHKzZX/0iN2+H3zB4L\n3vDQ\r\n=D5VA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVZoMr6YOckSjEuav9vnkuLbwu0fFgZz6Thca1pbpwIAIgDEsn0GnqTLVw5P9DikiVTnaRkCRXjj+xO+5/zqPcrKQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.7dd1a27d.0_1614636063727_0.1868939261142344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.12574572.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-circular-progress":"0.21.0-canary.12574572.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-55/LYDkgRLWRPyT+FJonTW9cBvxmAKLYBUU8AjQvoTu4FLh6Bu2g+FAZDJHO9nnKhmiynStR8EBlPRfEAygXsQ==","shasum":"b0492e42a762d47674865f4a84d164bb6360d555","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.12574572.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAhCRA9TVsSAnZWagAArusP/2KOoQfEv5/q7mO29CEE\nhdEcd57WjqiImATLuDJjey4yswIVsqCaZU3viGwVATYSVMLSivT5WwLgieCO\nDHxyVXjfVfQRUaYkLaFlrdvIZr82+D0JnogIfOtZ9FPXRm5h2N2b73RVGTTg\nObARJtkqHCLDQ85KIw/Qc4MRPij0MtOEtQaQ25mRD8SpTFrgc1RB2cn/tykf\nmyLfLxovI+RV/WZlI0rhOFMQfTGpNtjAyRc4HDAsJJi4GQWKuQiI4sN4IaF3\nFGwAgDBUabDjoh0OM3JvDtYZ8mmc0cG4L3ZzKV18FpY/CKcPos9AWnO0KiKl\nsE5g9gan3rFk20WwQVhYhprBVeQCOUaaDv3bLjNPXgQlH7sJeTcu6E4RLtEC\nvFlvXNlt1sNvTyq5q1Nta5QpDECfwhj4GAUyQ87yWtPjut9fxKmyDKju7fYW\nCxbamOvv3zyhtSYhVF1dlgc8x5jcex4TfVwsn+PLKefvYwTKuUivpSBq2+sy\nGMhYb7bBUE5Mi8yfXkviHS0HpFnrLFqBrw80ONAuYc0cnN4ZgkTDXFv99bsN\nTKxg0cFYYqkRfA0PfEsO7M3++Aq16SFMpWohcUFzDhVzOPWFsuNx/rpdKy1A\noSzryZfTfdn+vOO1bIKdLbPjmYCcX1bulTRXdKNooQ99A/uQhgXDWZ395o3U\nGP7R\r\n=v8p9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk+jJef4mSOGqVbbMVFKDGMj9wocAqgvlBNCwEk9hY6AIhAOvACR3rumuiBJO5cwumamJSzbimwHmKp/OYbWQdtDc+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.12574572.0_1614716961482_0.7091253039150862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.1109a3d3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-circular-progress":"0.21.0-canary.1109a3d3.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-BLCTX7qs+fb2kLB95nU3qfWSBKgJqi4Qsr8X0LdXeS0i+tbOvSSuu2XWqKHC9zwMW3a/tlsacaPbNzYtj6lNSw==","shasum":"c9e6fca2c23194082c9cb293e6b73650ce03baff","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.1109a3d3.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFbCRA9TVsSAnZWagAAwT0P/RjHukHcBqPufTCFBDH5\nQ78Ys7T1XXIS1v8rB/H+KmJWj1Kz0ZfhqmLvUrZtJo5zRCya2D/QFtgLDuWC\nvxOFwn/9BeG4f2A9+5tVoRgA2GjIqVs4vR1Kk3rMSyVdeBMbSs19rLYeT+vs\npRSPMA9hbRfGN8RRh926UN2K16us5rsRHKscUMQXmOMANNMBgACkNlB3INXV\nVewizxgWkqyKiVpk4kE1u8TQn/G/a5JYXDTJiazM4Bja396SDNHjWSqBADKL\nAMQJGkfakPOk3GAoEq3xo/zYQwm++BgcFOT+9jehM/h37TThpD+/2m0qXCEx\nXltbQWqzmVjNO7FE2CtOKdbojb/SgX+7IOesDHg/qSvdMC2eC9lS4ESH+VER\n/5UMTUO46VS1+xMPkZ6FznDl4aXiicmbN6jB0i04flXzau1GaV5H1FP5OOmR\nzmUT6uIjHonctWp7d7+WLyswUMnrxkPpzYcKHCitFmAw2b7lJRzC92TPoI5s\nRG7AsJ6fz88QVNXwvhKb2NnNpHH5NDDgD8gvRmNpmns7fN8G8+HhgN4YEwfE\nq2zxiZObJxe3rp2As5ADuSLk41jxwzgGisoaf/s+o7wlbqIuXdGaJpFJq5Iq\n2xOwpaNdtOAGGIoYL+aJmg4GZqp/bW7zPMjeHrZIyMV7foh6zVs/EaBtXtMx\n4Fmb\r\n=ZKWA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM0cK71AhlBWP9e4m++l/au2DFbrq16Nh6yvU9Z2r6iwIhAPZK+UBcKDezN1D+BlojaD1FzGzPKqHEN12ynvMiUFpX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.1109a3d3.0_1614717274761_0.4430783041684605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b9cd8739.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-circular-progress":"0.21.0-canary.b9cd8739.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-q8vk4iVfJFJVTc5S9miPoDb6mZbwMvlohdO76281IQnysTMitpAp4tply1UNVNKYPuDTIY9Z/T9FIms0XTVn7A==","shasum":"8e66d373b0afcab0e1fcf75a05c72b03f0f0d196","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b9cd8739.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8ukCRA9TVsSAnZWagAAH+4QAKD3mrS7jLtNb1yfCIMs\nnweBcYg04mmoRObTExoVV3HBcpIx6iednRQddicY/ebOgAUW+dqLxRquYNYb\n6D4Xa0gXErOoxpH9uki6KsiMdJyFqRPyDtEfqSl+Qi0SJCFDyV523CHy9gJh\nz9tP+wBLt04254u/VR+ELfdpWFzWMyCvTK+9gEdNBsZecDhewt1vEUnn6rwg\nVBReGeSwgLA08bX77OfWN923Jw9qff5587YLmRSOhj3GALHasoojuE7d0zPF\nyJqxnDiEHwBnOnds3Mderadw12nSBdyOz+di9hr91kxruRaROxhgsw9UmAkp\n6yx4AlSf1jmJm3yClZEZwFUHB0Am0PeatRVaf8FDt+wyMc+Ow0i3V95AugYM\n4/qvwzJ5V/5Gfjsa4rvZTJ0GM2ncZQI9ZkiY/M8nAU4zHfHBngLXIGVFnqMG\nn+KwPEfia2SY9/BhRNOjzdZQPTNAspdf/Pj2TAcM6Uaejx5iJMvnO7bjQ2fY\nclC3HKXwtgesSLcTdOV5uFPSQlDMpvsvSofv2TzDy99oQpqjCevzYWxAXMbU\nfNSW9K1PeIdxWNAvP6RLozmYGm26egzOpQl4UAnKleRzJtZmztXUW5QPU4MW\nwnB+xUwbLEUC3uXvGEKUWf3uoNIDEhXf66kBZtiQfYRW7Ul955q4ni02zTkM\nvv/q\r\n=ARi9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMxwYkcgjOOXuZScMifaAqPnl1U7tBEmWROSdLPxj3OAiBybMyzm3nTR3mBpFtVOR7AXSuKcl5v9zpcozw3QVkfQg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b9cd8739.0_1614793635913_0.3342814581303981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.71ee796a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-circular-progress":"0.21.0-canary.71ee796a.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-rJBv5vxvMzwHromri9a2dCNYwdzhNCqCZ/l8Sgwucqc/nowdJZZ9M1V1hRaQujW582BjK/zTHdCA8hrMWSjTMQ==","shasum":"16aefb8f300060ff3e44217d576a8a799443315d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.71ee796a.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1SCRA9TVsSAnZWagAArTQP/3ddRm1tRc9iVyl6piZE\nze8VbO0TArugd5L0Vr25EcKpdEqulxvzguusJ3mTRTCqALgYK0i82Yne53eE\niBZyQnBtH0TuOaesCGNLmxlq3DlDPHiiE4JGE76FhnMALLHsR1gELGfhcvar\nXRT+k1leNaTkjxOKsKLEXZLX6wHd7caoIjdfhwgMNHNmcK+4V0u4qemE45bI\nQVgONHooybx8U7lUfhNv6ax+cm7c5LP6OXD0wVX+Xi36K1U2Ri39cN4xoJwD\n0cNtibU38wNNGJYRS/gHZD/UxJtm4eNx9F6USkOuB2v9CK7AC54IU4t3FIjD\nEAvNlNbheCvHbaqicR395wPOGwB3hKKRzSVuyNRD+CFopR+MmKCMVK9oB+gO\nOsMdqIFWLoNl/hGxYCF9HBkYgmMDP4qSCV23ciePTJaqHnDtd3bJCYtsCG0c\nHVHOpFhviX6PohgX0VXRCwKd3dcrHUB+j/mk81atZzzm3QGYq0Kws31r1Cw6\n+rdO69IJY67gief4Dg+Gegg31L7YzVu2qTafC6Kb0nWuhPJ3PDOYe8I6dhPt\nqsq6KZanqzwFK59MCDRypttyKsDwZqFrS5Vz3T0sGwn7lrQBG6c3rfyZSF5G\ns5UUcugjJz6BqKuRcSs34sUovlrsZraOAkdHLg5KKqWbgLW1iJxqbbUOOeKY\nCjVN\r\n=3j8n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSl5HyFAvo5U0Ki12EKxms4L9sljZgqQdk8eB0Z7QquAiEA8mkd7tH71H5TnCAxzOUYrtnTd8w5MidI8+ytfvRt1zs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.71ee796a.0_1614802258256_0.008550567245514396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.2be191ed.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-circular-progress":"0.21.0-canary.2be191ed.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-7vpbkKEHOArC8Fw02qbq7ijPP87SMRkyAa/oJURApFdxa401hO9AJTWXTrTQvl4SQqGUhwxMob5rWZDcj/Z1gg==","shasum":"bd2420d432a6f3d1cd26a1dc82cdfa992697eb4a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.2be191ed.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATlCRA9TVsSAnZWagAA1Z0P/RTrWPmAaYCLgORbG2Ru\noguac45Oco/sticEjXEv2B8tc4JsPcL6Jt81o1mFMbECNFx4DbVV9ZajVZFG\n6sWtU1TGyld9cHeLRc8yJLyhvuO4zKeTxMm/FizmcitaW6zQ70t52gmCmqFk\nr/iZaCYMZiTm7b6VuzC6tdrQJjKFzhOKkQD0q3nk8rH4zkcyDtfkaxRaEhO4\n0d2pL5BEIlPI/UWMrdGeB7AWAao8iO7BstxOFjO+UwQPxF5RYZh2XpfeXA/l\nSBQsCRTBhwthYeTHd5typ7uHBhyzPTHvfDQA8Sbn8Fh70YYPkaL/YmG1TDMx\nj/AuTmh/feeRdWIytcqPhR7d3TDoASbt58VOVeLrYquLvP8o4XSTlCCE8Jjr\n+eU7NHkrvqZne1S7YsOb1xOckvjB0qKukiEh5ujIZbXGxYv9I6r1YhqeE4SA\npSNrYtJbzsD3v8bQolo69dKKUIMrxwOj0HZLRlb7nO0oQTpHMETKN3Zer2+w\npsPYon95l/CLUYDfNnctayNI1Hl5ncT6MhZ9mpz8EDQ8KkEYKa2svUKZP+s5\nptDhnRZvXfaLW1Smu34aSQ8oSGFEXxR4MX6KNrrzYMQvptdj/n+o+F1daU/5\n2J2sI8apZJh23VS6ubY89+knJtKZUb4qVwehGh/CadLVuf+bxzrEfSY8UdX3\nYyvM\r\n=O4UQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIl761ScLe/ms+dDNNQbMdIDZpp4533wOaHOsX5Z+ioAIgA9OOVnX0QvOOZsg0zQaIwN9Vqvgoy2el0iGi+sSHh8I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.2be191ed.0_1614808292888_0.8001797629933127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-circular-progress":"0.21.0-canary.6dc7b06f.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cwRVLJiTXQVmAm5foT8LS3NIfPD+GaB7BUmSiUJvxPsH+9miZMO1kSs+2vG3pWihIs+F7nLkCJIPQkwmppPHsw==","shasum":"9e4f7eeccaedcb1911e5ee38bd460c4b3c04d122","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.6dc7b06f.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmzCRA9TVsSAnZWagAA3wsP+QDGBTUdOvV13GQzhMa3\ng69S7UYS35UuO6rId87s2TfAfRuvIqNS02hWB7bp3z2QCjR2sugl8OAjI6/6\nLReKRW0WBjHuTSj1O25mOfdw/Tf5Dfky5QZHPjRyu7ar/AyxKIP2LXB0jQbt\nE3RJz12U1YrS3j5LNu8I1bt8oMh22k0ALdv/qqmCnuimfgVlDjCm293SVNHV\nEwzOThqU8+UPcf2SQ6RHqdVcK5c1JCq+3v1VvK0lv2vJKVYeJC+U3zeDBdSk\nbTMUvT1euwrNM5KCY+knIBSQIUok0BfiV2X8Nc9URiQ2Usv0/E3IrJkI4wmh\nGjvj7Jrkzc/TMF37SfZR/X+av25Ry4F0C3pRE/jAD5hu5pzRRGK/ge/9ah2l\n8aDZCrotZCToXPTCfM4fb8gaiHQBNYXiisH671lnOpAhxZpnPjivhniKkIk3\nQ7m/XkfNYsZYnPWjuTol709bX7kjJSfM+BxfkJwJMlLXqO+JVPQk/9MK+cuQ\ndP/6duWmie612G8ary3372PpXczv69dvLE7u2ZTUpnVRaMtkY9U0E56bFo/L\ngWLNCSryuudxePiEOLg2LL/EjM9JgfB47a7nR8RErviW/a/3w9FWY2FO5/VG\nyrxo3Rw93IYpsuuxdOmEl6FXPQfkm86maZr1/i5zDCNoirNAH6vy8UbPs51u\n65Zh\r\n=Elx1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKnsVM52guuyGBl1x/a/QZA6/Qgcn4t2U/H9SWR6k/VAiBQvBDWyQ6Yhydl57HHTFQoqaosvbX1lWQBV3frVJNBYg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.6dc7b06f.0_1614903731231_0.7236430994663883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-circular-progress":"0.21.0-canary.24fe7ba6.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tngBL5xc0nmvtv/PuwbMyd4ScAAkHc8IZ3Tre4MONDwogTFVLdffA2DJs2wCzMmzerCAhcnWbX/qPZK2WX7ekQ==","shasum":"1901f857a2c40db3787279d419774781b4606909","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.24fe7ba6.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnoCRA9TVsSAnZWagAAr2EP/iCC8FxzNZOLn8f3qVCt\nYLmZdHgr5skzpE3fa8TgeZ0VF+ZMFbJ4wxSaCeRgbUrJOWSz4LcrBDTVjAFF\n45KeFPTSxRZKsHioDk7SsQJYMhXIiLO4mIpw0HbgJwE8uXLqFahl1mOYs3kk\nxqheXmNuFqAQkPAKPo21WsJzllmP5pj/8pQaxhudQNK2qi7VYVh2wm7CVQVP\nUBf8ZnadyIvekM3xrVxKalyiqK4SEOuaYxcT3zA4s9zUl/8GbmLRysErccjJ\nwWZxINBbvsmTYw1ogQ+Xc/gAOAJT1X1b8T/lMvw6C5p5WCZ/U+Pdvk6JOyAW\nD8CnfelgyEIgye84akenc+udPOljO4jDpGjkfzp0qgyVlMt5p//vohR4iDc8\n4SfhjYn78Ks9dupLGr508h/+r5FlKaHdlvxrwOm2ppLjvuWJaP39R8CxfIZ9\ntOVxEqGCwwrZnaMXOI3zFb9Gbk+Q3KLwGmaa1CMH0MoaJshma/Ga548iaUxQ\n6aZkeuUJgq5+EDCj/7q4Cfae9REuk++qYFjviJEP7QMmEvnLLLNOzfMGh/mW\nx1bvaD2SliNuiAYi++ED6iwgFeIBsjH1BFBhXLai4iG9mNGcO+ZehH85x2R6\nmc7Lp/e+oq1laeUK2agSw6oIg+XqCKdZwUpzt48W4T54QqRXi3RWzhqbt48C\n9R/x\r\n=vgXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8MD/1NJvmDkKCrzAH4Ey8QSIAOmA7XzAD5/dmNbvouwIgA8ISgrpYWkfbjF4S/gV4bmdJrYqOCLc2NYWWYbfiouU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.24fe7ba6.0_1614965223996_0.49329274554190006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.12c477d1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-circular-progress":"0.21.0-canary.12c477d1.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pwzyBnVaCNvtmKtbw40FqKg8NKbDK0mHvjjDXBBAQaPi05PJmnP9h2cFMdiD8D5dNQ52yKsJFLlMVQtF/OOtrg==","shasum":"5bb69e8972b4e50fda014ac24f54d36d900d6d0e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.12c477d1.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPeCRA9TVsSAnZWagAApN4P/jDIJH3LiTLuexFrtb01\nVbypwcnkC4X4EDO9g6qy3unyMjsOPcZHGPB4SQQGLG36SVi0XakUFQbvOCx4\n4aouHfSLwiHyfDmah8anRdPjYTGHyUSNokNncMUTzJ21MIf5tcdLFn5dvDVH\nNdysynMEFGdxozpq+MhdssGlscfIreFTpVRALYHzN7A9plhjSfOm3qZVku8V\ndl8x8fvRPpie9DzWFOlFOPeLZ2fl0u0wfvqDs8FcCyVBghisPqtPRqHjScR/\n1naYxDQhobmGucHGobtOZeB/Aonl42LRg1fSYMoiguVBk99Es5fWB0ZhPTAu\nuixqWkNC43bdTocqyaELdD4ZpxL59RFYuivfbiqRQSJnPBhQAPOYxN9osr7l\nDnve+czUtcB5cgGhSkFQclcTjUu48hXQQ19+dG1m/vpwJjOQ5jzR097ggdNA\n3BEXH0rwotd3mr9pQFNCON/TuYERg1+9XlsqWwShVi1+rsHkebNyAR2DZOnJ\nLG4SyFqGv97L/f7udzN+T2Q0Eas38TKulOL3C42CJDUILC5vMqHXLveW0r00\nQhzBnGQEimrxBqUrsFOYqF65I34IE1BXdLQxtpv14+y9tARcf2S5DkGQ/YG+\nFnnOi0pqd/mMwnmBX58PITztjXs7RSwpmNXKQYqDlq/QlDjRjmIKofFZsSP/\nU519\r\n=2mLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1ohV09EjL2g42Sf/RGZmJLMfLo0LhWiwl1pzZ292LlwIhAKUs2m98XtD5VzQrJa/oS4WwvmHRh6JG034jeVQCNitx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.12c477d1.0_1615242206386_0.7237531623564843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.4c38f801.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-circular-progress":"0.21.0-canary.4c38f801.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fqdaJx866U8j/NA6JopWlUAG/8VDn1kIrHkFRZ+X3XdDi05+JQqEkMyHY7WZ/U4PX/qlk3SX302eC35M2Wavzg==","shasum":"48669ca917b6e8431b257759ec65aa671c9467aa","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.4c38f801.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIxCRA9TVsSAnZWagAA8N0P/2/vWRCGOiNQkjX1SN4L\npUskKMyRKCiUKdYDOF0fWtGAmKYRITJBXz9FLseIyUgie3F1cehk1Qg35W75\nK3qmYLu/edtxkNfYb3wYbe5oaadVwlD5o8pj0u+vUFk85q86nNwHOQ6ndNNh\n8AEzZmxX5nJh+wZBKMeTQxqWXFpulg5QTDSGISc+5P3kgR2oOBvaKYvPXgQG\nitogvba97WQ9xPOTl0HwH2yekvskqJ7VzCoSeH40iyL296XgPjwMbn0iSJxE\ns0aAozEIL6MbMVqfeQjqqb2wxc8R/qtpTc1A/PypH8iiRHhJcawsChD9mmUc\nnwiwb828r19MukdtIDLoxZzy0sfQe/HrgJI0vPsJhDX1OH80/aftHK4Y6wtS\n3NULJ+HMJkWLTAa7OlFhDsAEds8PQdvmRqWlw2HgKDvWs4AQPIX4g3Cy9EXW\npfT+WYE0kSALqizwp8wQBsBRtHfPGShPRPATjKgLdYe52fuT2scRwa9dlVxV\n/w2hDBHireN7HYGM+/dMi6SY5d44ExTVe4GnWLItJIteB6aWo9QZC+1VXw5a\nUoWA7IqYo+ms14yRaG4AvjiOHtK0/DYEBaDUnr+uLqSuunXiTug2iCp14ohN\n/M+8Yef8rj+yJv71VhnzJAZPqxnWXx0YQnZDenz+vixyAz5JiC+uxkYXvGcf\nzqTN\r\n=F545\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfPgT+sMPzRaEy9qJKKHjXOlhd/yXrEgl8HM20zieT3AiEAlcKQadW6MOb0UuQfu3aTAohddnP/7PfM+QJIcUp31QA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.4c38f801.0_1615245873279_0.3157161410312894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.8795b83f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-circular-progress":"0.21.0-canary.8795b83f.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WBf5+4s8/9P5Tj+v0BNmfXQ650TcOtcupFjz4jprgkSVNNVgj7eeKGIyRV1J1/ngWnJo45jRyMI1Q5E86x73Iw==","shasum":"eb03380f69e3d2c5d98fec4a5e600101ada779cd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.8795b83f.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74PCRA9TVsSAnZWagAAJvgP/RTW6FFQhaaV36TRQHId\nBUfRuBVo9c5+tI0aRgZQBKgllKk8oWVd5MmMp5iD+h8aKc1r2FafmPPPIGaF\nZ17FgHTHN09XrYfXjwKQww9VPgCfbCBl1jaSx7DR+VNb8+NzMB/NZTMcnHm7\nkhiYMP9AXFJvPB+yubVr5pEEGcpU2THOuswrw5Y6CpsPJ6uh3w0EY61SUjmf\ndMyZRBRNDxkFzu5Xoa4zFMOq4UFvDsv6YuIaxBiPvg6/J+0WHA7XUnO7GdBp\nDagdJQR9+zZ72Et8R2v14h1MldNm6B0heoB424DriqgV6rnJn82A19aA1XvP\nhrsYpkhSLt0b3YFVG4s97MyrNntLg7kRGBo5QgogkYjaVDcZfnbfov//HnJp\n2azqIs6crvYl8i5nkBRpuaTIQsxzxvq/hgFbiuxmUMR/ZM0SzyoslvK23ueq\n60o3+Tw1JeHbncr3D9S3x1GWgSvq7m/O4tMegOyIFif/9Jo8AgFqBMdJpSpq\n+dHpKQW8tanr8ShGcuRcCP1oWGQRjysUlwV9E2NHhOWCPKZzG2Dpsnge3f4X\n7ANJIxkw0b2DaFBz4HHu2L3LOd0/AUpnYq+bpxCvptxkn42wcWLX5R9X60aL\noi/MvXSWXz90gEGMQZTYxWZsrQj774h/Uwla/8bzyMA1iQNbEomgC+8Nx4Vr\nZ3F2\r\n=TB99\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnmTbgUIRu4VfF0ME4gzEXMH1I2l39kEIuEyI28MA8/AiB/lC9kVirKnVALzsqRjxt9FmTzXlhr9aTFWSK05tbw1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.8795b83f.0_1615314446707_0.16749540948158326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.12b84cb7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-circular-progress":"0.21.0-canary.12b84cb7.0","@material/theme":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vUMeQs4nEFyCR2t3pFzU1FiNjr79tFx1j5H0Oqruw+ARAT87hUp4dMCjMutVWET2jONGf10Ij6El291J7CD8kg==","shasum":"2db8f9b1234c75c6886671309eef31e247a7dadc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.12b84cb7.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWlCRA9TVsSAnZWagAAHV0P/ir2reEbDs81F/Ushti/\ng9QXpgUi8oxyRstCElkatp9iZOIZfP/H7LniEx7RN/tKgysFm66Rl7RugEgG\niYXdRmhD+EwWaY0Z5uhGVqL6GB1hSZyhWLQ2Z2y4/3g+K0GVnBY8Rgugwkdo\n51naetx0d1mEV/uPcEAxRpLcSWDuhD2NUfHjmJWx7euOv7xGOG7c12nwUU6l\nTrKmHhPVCoQJxfbSvvnPBea9PRkAx4NNQ98h3JP6cIthMfjvz2MkYv7HbdxZ\naG9cSRScMHJ092Xdf1KSQERxaH1HowaX+cKDy7sUW9SXmCpgmKv3sLjuV5n4\n+Tmk/R6NIa6c0cLJxcYqdx23cXC8+04XuYpPUEPOlijNhzt+GlQBxcZQyUBR\niypjAhwGZmz36vp2zZPy3PPpRQ2gNjGkrFsKrAR7pK39XfTUasgCQnaBxlAP\nP90ArFgJfJtT2TcS/I9ztAk4dyHxbz1G6pJY6uFYwZUSKVApMwO41lMImiD7\n1NR5pK5NX6kxQ0Sss3NV2XdIPe0Lfrl47m6kQ/3L8nLrM+9HfnhG8EAXTxBv\n12yfZCCRf+QZiIXL3+Q9EoXTfhUPZv0+3UwtSCLKc7W/DTWsRFbVTXmi9sn5\n0ae13sSoK3rILKHZxFlx46lHOz4vbjz3Kb6EoMlp32fW8e8RWFaa0Rl7QYRJ\nLTpn\r\n=wUX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDryuXeS4ndlrCiKHpwT0wNAuTrPmI5QdNtAnq7k9JqPAiEA4BfPo5KA5WWYMLdQO64LTUWvUslaghFBfb147NtGjmY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.12b84cb7.0_1615336868734_0.09236499016955668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.6ac6784b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-circular-progress":"0.21.0-canary.6ac6784b.0","@material/theme":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uKWuHvE2WsV+6ww2xfVoYFlpKZs+2VYdBrNEzaJ4O5hxodQGtbKqE0/TMsmHrqBLlMNqIXMObVs94crSBP+ADQ==","shasum":"7723d0b88fbdfe83169f5c62d27ae618b540a134","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.6ac6784b.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgDCRA9TVsSAnZWagAA0/wQAIR+4DSNbV4D1r9vmOr4\nN88jbc+LneE0YUEP5QbyeKCBhTCWTKqPHC1N2VmevDYYE6GLiKADEyBQNWRo\nk3XPWEHG3Pa62aYtEOyHfP2IaDfhSXer/l329jfTZt2RJQ+s0CmHWrZaouMF\nYKtUDiPJpoEVxOcKpAey2/bV3gSjBpYxMzlcC9oEB4MiXp/ivbJqOtJ75T9h\nK+/NlLUwm52r0Ton0pq+shc5ADp5zM7FupktG42+PrAs7Vds9iEl1sGKBbp6\nYapAjjLmK629D0f2WZMmpasgTtEeMxuJzfAzc2Jvqms16GFBkTdeU+44TjBs\nOQtrTalEhNirZQ1ugYkBjf2dyDkgdLlJICb59SrpHKzfSIfYqvd5I1+G0oM7\nPn9lRR7OebGy5Y57T6VB3uUdjr7vCXAv/6yVSw5Fv3k3GGbZjuQH+i85lM2K\nZKehBiTEm4wXEtTsjP06AUH9hu7UQfXzvCB/0JgJFQlVMgG/UUrGrv/jhIyJ\nYvKmDYJzgAuUzI3/udzlgkWsJoZj4sOIL91TXykxQUKUrI3G3gZm8Mgx8Zpv\nFPzX5HZw6Hx2a3KhiZ8RZBYSnmxqVyFCKQoMJOxqoZJ8Ur7ltJqa/6L+t1ck\n+YHAtlC6VUzHigA1J2Geat+lzsKTBtn9AKLlm3OtB1bVRnUrOMRn+sRtTYWY\nKKDI\r\n=Nd5v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCieo+rHP3rGga/ahD81GgzbWuwPUpEyiTtNZ4U5L8UegIgVkVWMx3FCC5M5tC3jhq/CYPO4OTsn/BhPevdYI4MTLc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.6ac6784b.0_1615337475289_0.5882480453081231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b6d92934.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-circular-progress":"0.21.0-canary.b6d92934.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-j+fN2HoDb3YpRCqFLYEmffCe3+azfvr2ALiq7wL5KzVrJENSoEUHxblDR/UyNgpEjnMQhYetJ2OorVQQF77kYw==","shasum":"55a6e39e78f8cff6e1bce7d6b7a003c5beaaeb71","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b6d92934.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGVCRA9TVsSAnZWagAAt38P/imyDUv/d9sQfQBEg8LP\nJ8pATLj43S11HzKMzJU0Q5ZUM0RTe1ea2fPp0wgcTNo8YGKZb6AJWHLYDLw0\nHyVn5gLyZjLTmLDRGhIXexVorBxIPdL00GR8KIlBukx3NGnbWKsFwfN37HI+\nbakyyEftpd2g+aottF+QLjQ1d1gF0FocrHuiI3ufRNlsSwumkpvFfK3wfx1C\nr9EIUv7Wpp6xQFAxXmhd36FepEKbmTkRXx4Ficpq2B6Y/XVy0XuzsAAxILfO\n9p5uGhdE0gFy73ZmUY5PLxY2Q6vl7zfDLV1iW2NvjqIkf9DjqN4hn2valuBc\npNAMZfCmL3RjZtqkJboZFJiUYTppZLnLdEVtc3eEqN4XwcW/3WQ964BEHO3A\nbZ8qQmiNPpZJCivwYjEGNAj9WCp1ZYxHkLC0mxhK0ehhBNXzY6pqZxUH6Q+O\nSQRhnxXLiBL+Gcmkl8IQg7BbUqtXQfbZp1G5NzYPWKr7UDvUHWXNOIRX6eHL\nvVTt1j4oqZGj4f9MVec0pNODZmKbl4jZGb+2XLsGqVbWi1ubHA7KLQktJNR4\nA5xJoMR9hiUoX2Qy8R6jTGi2z2mCGTsL8u3cUKUuWB7qU2v4/RBOqvJa4RgE\nvPcrgqb3qRHT6LyPsXAlHj9ytKS2Ojl2H53L4wAEM2eTHJm6VHpTGdkr/rMu\nqWMi\r\n=4YLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDelbXT7sMYrppzvDDKm1gx2b7xaN6iouS1S+uI9RUlAiEA9hhoL9k1pEGXHcUY3EsqFPkybK/z2Tbjg99dS6YN5Co="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b6d92934.0_1615413653474_0.35629444505364605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.99a55b9e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-circular-progress":"0.21.0-canary.99a55b9e.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YkVveFBa/9S/Q10BLDG7qnoHfP5YEFdgGzwqd0qA0TIoLRyRAIpuT4OUw+/QcUXWfkSCTPfxyQboR3VkqIpVuA==","shasum":"6d8d856ead240a521ee4eb286463cdfed46f5516","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.99a55b9e.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU17CRA9TVsSAnZWagAAJZcP/R3bq46nQsGSWH2QAlQk\n0qAJrsmG+O4/hEj/hKT/O+7M3KvCP61ZJUxufkHQgQs6pBJajKmFeJ6uxsWk\nX5E9BAi1BqBEXvLl1+ZrhjoKa1G61bIvBzU1IXw8RaRvBjz2qmC4+1rg3iq1\nskXvtzl8NNLfSqWE5S6lR6Bpfd7dcS8x48+S52QEV8E0pHRdPDAkJkD90b/t\nh/4FrZsMiFiZvD0+6QKm6OIPFmrJXCrpDemYALHBojaVIAQsYZgQJwz+/OUn\nwtteCmF4CIGC5H199QiDnbL4vLAHhzL4aszlNNcCFddZYAjSM5jLRupkvkbm\n86WoeWnj+nDUhRiM81SHFmEw/62GRCcS00JNVLY0xIu+5F8WblpnkaMlKDzY\nPq4mTIUkjzlfeSsOrP1uCtsNUnyG/T5PErSpFlN58S4n8j9BZ/XQETFbQbcl\n5ZEU1/QV/7sto9BTr/1Ox5AcrEzCfiOGjaBcYdxGpwJKdskDi4vuEAwvxs7f\nRxwZHaWQ8lQnxnNYUV823OeqHw/9T9TExv/RyXck99Jqn3v2vV0fvwlMYxCc\nwJVeCrEdzpcYmDXzXm7FrtpBcX6PAQg2taSM+FSRHLkdSkJHccsN7dpIODyr\nA1vYe5dLG+p8Jf7QRRAA43sBVpzDKsILC6lUVRWblEvXp/6hlOH9zJipPoDk\ngxYk\r\n=IWhe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvl7EBW6iLYS+Vh/a+V9vWOf7zVk15W/8NSon4SD9CnAiEAm6j8AuNXEvE5aCS/x/0bOC/F1zB4gEF+AVdW2SkUpV8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.99a55b9e.0_1615416699480_0.7056704046989617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.bb14efb7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-circular-progress":"0.21.0-canary.bb14efb7.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0AtzCTIF+AxMy169OftIbX5tQY/EaFzb/DqTnqh7EUirMIsCtlgYXXPwKI3GX6AJcWsVMvHXC1+4bD/TY/FOXw==","shasum":"b918aa4548fd66c37450c187e8aebf9ce8d5bcb7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.bb14efb7.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgmCRA9TVsSAnZWagAAdWwP/j21qz7ufQ9TmpDBo7W3\nypcLQxfay4uolp8e5wtVv3q+IBdXpsheoC0AKPnV8udeRyuOzeStzkbguZi1\nZW0H0mx7aFZybyC4mY5+bR8B/GKcmqOod9MZZZO1tCRhwh0EGK99sjBycUw9\nEihk15pvCf8bIIMIR+supCU1kRLfGvl2EXlZ8XNGCFEIZ9brn7HuFpycLjpA\nTZ95jJQ0GNAbt7I/W9CNrIt3wmiGFuWOkY7ytPeBd3QDFJGd2ojCyUJVZ1cf\nHQPZlDHJgp+b2sehoEwyp9P5OKTRqECvQ+IfkXP1M2gjcspVdEzeMDSaaG4C\nCbwim1FF2q6qKPDGv5v5aJ3V2vyMgQXH0Xag+ABPG8A/9fswR3koXHlMs8wy\nOsXxfDjp9WWNv+5GdSW18YFUVOKubDm4Tp/HBf6p4yZNgch9tDK9A+0KpLyI\n5HL4Xj6+T6Gk54ikWN4CTad4PJ88OmgC5/9aWCfGF4WrBSGyhzI6ZxXjXEf2\n+oczAR3yZluXbymRTXYCnMMM6xTaL8+UK05Aoq/Kb2DEMLg0wd8EE3zoEsnd\nP0fM5PXTMob8ZWfbvnm/6dVGZzs8Rsqfv5zw0aN7Ys9LqMaRhwab9FjyCg7O\nLKPRXZXfNhg45NIjBEItY+qg/c7A7fi0I05FNlsZHdYDumNVTS6LmUpkMJFV\n08eg\r\n=dHaD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESBveqi2snbWsFxB/Ssrn+foj+CYnzoeH2UjLFnSMMcAiEA4pn8FhNVfBWFvH6krOHutD5m0cvrgVVdNy7GXVQrBEs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.bb14efb7.0_1615419430297_0.5108064001830401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-circular-progress":"0.21.0-canary.9ecf3bdd.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1cHGNazsCJXzO5MAaZK48ecZba+5KlGjzTTgkNRiTLKTnTsGZ/F7Xs/4dK842Sjk6ZPgEmfMOHERWXk39UbhFQ==","shasum":"3d074b363d8d4180a46b7a718792f4f57a7849cd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLyCRA9TVsSAnZWagAA/wgP/1ERC4njQGuXM9tnJ+Xn\nbBEHgwivoUZmt3id20kGmoHk3efNVeQ98T6afulCjN2mc4DuJ+q4tTQPudZm\nyACfgjxs44MF0RrU5DHQVKYdvimz+IxxiDkm6rvBkZkTb2tin66xAKz7JmF6\n4+ZTYsaNVUyPiuOPA8Xj7PiDWSEpLT4UQ2rwhe+kG3d3XgGD2NPoy0HYJ2k4\n1yszgMJRoLM+Pu4vHlcOzLajvPS0ZLyVaHkugjaXPNuiOcsb21U8lsmbbcdw\nicghC7RDytq6BQvn0cKncDt8D4jqcqR+HMi/8a+6I0kd0sQDdfqRD7uMhyDu\nr5zEyWAPOG3CkthOY5wnN+wC1VrKpoIKfDMKNIa7xNcTG5wPwqH3DUxgYVvW\njBnrbBly800XpOZ4b5AIWm1KbGxNVQx1QRxRD42ID5HdGZbS2yb5sHkMKTk2\n/SH4NkMemFscK7ygbDWcpWoaG4zRtxlIkIYAuM1XqFKJp+4ElaBegwdVrxMQ\nhytdVfOzR74L9Q6+5x91BZ8yE5k/6uQinS0/63M7Wr7gyK2TOKIX1lNaL2uG\nZJI3UjAdHnG7mHO/G7bzD9X9otW3468I7gbyBakmOLw/4gpMiMOyYl2tCBB7\nwrzcq1Ynn3KHxv65W6HZRp3HE9DS1AGodgiB/uIQDPJQ5C3UFsxhpo/uLbPz\n5ow5\r\n=mp3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHKqRYH9+AiRuN9rH54QaEIxx7oUiaY0QlaKjyNueUpAiA1ZAUdArwB7ORLvY1cX3vGap/OHva4evoOhjZUCxG/ag=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.9ecf3bdd.0_1615422194258_0.534942750045009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-circular-progress":"0.21.0-canary.7c0e02fd.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kIyUqkATsejxKdSQsBpBdzzpCTg3LBTI7TftDJYWQ4YivkUurPvQ2L949NKNiTqt0wvWk5eVW9ZGYpC6Tp6gZQ==","shasum":"a06c1827b6dca93dc689236ada3a563709aa7101","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.7c0e02fd.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZ8CRA9TVsSAnZWagAA6OgQAJTxkIlhWFgX4JWuZwQH\nIwUOmFGE89L9KFQbB9es55lbPa17nrNmX4GvdqhmmCmafPIuQJS+eEr2v/9R\ng+xiREF2MCbyqZsaYMr3YRwJpYTWVbmxJVDP1l/FU8WNehk/SCL27XdCmlS9\nw5o95sy/40wxh/OTk09+ra9URcugXIWDAKb4h7Yt/HIF++cELkBcr+CV0UcI\nrfVXsX9FTuoZl7NNW7JHabD6DoVOs2evp5qflzKTJopoZ38J8iHME+N/vE/7\nZEnD17D9EMZc3wCV5O5XRTVqiZCiwRtLLkOE0d0IItkupXH+xIlibf1ZSNsT\nA20QtVwJDr6sgbGUWZPSUog4vlUjUL0PVLrdjLBSftgFufCUQQ0zfj+0eE0o\nVp18ae1FHsdf1rjlUk1kH7xovwNyoFGyqdkFyPV00o6hwbbjZrehpCJlKXRm\nFwRkiRr0RcXOhsVBZjWUjLZ85wNHFiG2yM/5Ns3N7JYrdPKQ5tFxWF8T33Yp\ns0/6tMJRN++J56myP3BYSD12QyoGEUzI13IwSxBGgIkmidvC2YKvliK17jxh\neGW2Z4bz0GbDGuWv+TOe8EqVst9ELOAVN6Qx2LZ2ej2PjkE+6Xw7q794V/V+\nWh4rZX9qaOYFoe/qc762YP4gXmLjWFHeqWU2x+P3cDRsyFwf7Ab6BD0GaVN6\nLhyU\r\n=028I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNe7VsXJbUwrHILykRW5hD1rnVPkxGO5z0xPiw/oiJMAiB8GkvmJOxCcbPsgN2UHQgue6CXileNpbTonD6d3xH06Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.7c0e02fd.0_1615427196426_0.433389883290652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-circular-progress":"0.21.0-canary.2d6d59cc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/GeXJj9H9OAWzWFwb7sdL3JQ9CyYK+vp7qEvbP2Eyi8gTtn30POcbIUDlMa6l7i8gkmntLM+q2EXRefhaBn1XA==","shasum":"652e884975776aa552bfc8f0bc64688312691311","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.2d6d59cc.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmF9CRA9TVsSAnZWagAAmWcP/2z26L0posuYW1u9mJld\n6kmY2HNn/d6a66ZMdeayRZBllCiRUQ1EQsZ86VAPqOEwFO+bBxtwGTXVQ549\nMyCKCVU1GFxrhJRAFudReQSC/729MgJ3RroaWPVqfiphYCLzsbVLYaH6tmnr\nmYzJ2S1OuMeTeLgz/6NpfmzwmTjOiXW0FAUlcTJg6XmXdbATu/fY7B+RI7Ks\nSeV+dKAYW4U66Zvj6w17RSL7l2a8j6Jw+Qma8ZEp99sidpk/Q6q9eWZpx+qc\nVUmij3tpVX/7+sVdrjFfmc8Y02S8VVlv8Uz/e6ROYzeJa1Xoe3KwbmZaZPXu\nmPoXXnL7AZ/lfAXCb50GrhDVUjmU80Otk4ZP0Ax1yYbaUkG4wVBcMJ+YpgZR\nR3SGQq+sWJu+oJax7HA9ZzaVXFomtOCbHU2ir7r8SPkm1QtfaaMQ8ar6rlF5\n3A9iClysFQcoh9e/VMBAGMFiSKABu3Pl699XKrZ+rbaOQtFoOdnhRqOLVsg2\naYEos+eM4ftQB95tsZP/7OdBV0GA9xIMafl0BbTlQ61Tkr2uiC0/K/+eP/56\n6C6ubfJ2/IqX00XspU0XFBi29pMfm2Dv6eX/eNMWRBmOUkhE77Xb6nbQfwd5\n4UgonVhj/VS5DwClA7FSJfNq1ETjRa9pXHB8VkLDYz6OvJw4nEztF0aW4j6L\nEjFL\r\n=+S9F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPrO7/rA/6pOWZXmz5yP+hhSLEpYCng4JAfoBG2kjzQAIhANqvrwgNo+8ZrhiEVAv9Y9Fq7uSh0GFIK5eODj3oL2wt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.2d6d59cc.0_1615487357219_0.8103546204415069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0138863c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-circular-progress":"0.21.0-canary.0138863c.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tzlYJmVeqKFMOBVDA/FEX1AjkJm40ou/GGyDuMXsSBQJ/+4L2f4AqNIcelOQtxIPg23wDEPox8BeZkfpNsOdFw==","shasum":"9b069b055fb599933a64827a0d1fa8ad4be7f113","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0138863c.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmM9CRA9TVsSAnZWagAAkXwP/imXSallVE3aiuehZffe\nAWSMnfIt/ApWLrjkly51mAe6IVkZmzRPeXzkecSvQiXOkqW6ML7RZ4vKtmrR\nU8+2vAen61LBTDuzEMe6l78XJPnm328SXqjHhS6SziDsZsvGtxrW78Ljabmp\nVUCLDCOSgKA6rqCvNBKy6BP/mc0iHC6jNM+Xhc1X3ZD7dqLfqXmWnuZ40qIT\nsTBeWDSYqb6Gx56lSuNFPApKDmmSgx7Z5ayUqKkLLVPrLkkgM4gPyao+/eR2\nUhfZFDh17DuIuI96vtPYNrR3ha7UGfvVQABIyrYuphGGu0wh514asVSOCOYe\nKtwTOn9gpg7EKSALV94RgqC3X7zjIntMaWsKV/W5qGUMQYoGkLjXA80QKaNv\nx3Fl9zWKVFYPbdWVcMB7j6s2OxfYOkzTgWAn3jL6nfKYQ5qeVHm/lp/FMSS9\nulnsoih/48JFLZbvkQIB0gI2B/TQ0Omo+qaNj8RjAhnB/jW7dqyoA6xJJGkn\nVS2aWY/Fwj9BNG5/UqUd3hvmBTdOAiBdAih/M1WVqcI2xKQ2TxaUTSSCYG8F\n8JJe1tGHawtMV0fai7waGFIVTSrS4qZOoPPuVWvyiTK5ki7J1pndw/1c46g5\nZ8o8P/ymsJaEjGMbPC5QKf71F9eRqfMlR6pCU6wIAk5C//jYRnZCNSdV96BH\nFE8o\r\n=Yvih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG4LV/wCkaJjiFE4mNnz+PZISzQH8Cpb2DxYzzo3Kv7qAiAHFnVdNm5p2G25sgF6Os1kUDwxMtyBivM66A+VSaSnQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0138863c.0_1615487804789_0.2857720615683812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.926f5bad.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-circular-progress":"0.21.0-canary.926f5bad.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n/DKENHMi6JxlAvde+EVhNxrHR6jv1ROjGldMJRRVNpLc3/Cw585noxyHU3fieG3KlMIFWU0nwaDOQ0crjTe9A==","shasum":"96e29b47f72dbe0d982225637b3b774c87cdb2e7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.926f5bad.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsiCRA9TVsSAnZWagAAYa8QAJ2XSQmsUl4dwzjllyRM\nPnrrTOaPvFWx5LQkBsGqu/rOQCNuyJrAY6NWRekNu8b3XVcteiWyshPARA74\nMy3csLXNGzhJSUDbKmBEjy6sMNRo9jylNihO22NkgKb7LYfSaw+3+rtHnsXX\nzyFuv1ry0gZKq7tyHTHJWSiZxVpCDRZKSbJJ9Guc2Nh6YTV7tEY4RRQ2rKhV\na0MF9PH43dgIYhNbniwdJXiQzr+yOV6MH/vagLoBLIJ4kwL4m85T9FjkI5fC\ntlYGA5PW6KiTx/Epb0JrPw/BUE/RMyISDwA3q2CNHvGyLEsoX5XevodhK7pE\nJ1KOcJQcTgf+e7tQBVeltWWG/Jj/WQ72/l6UBJJ6VbFWaHRqFwXe/pyTAr07\n0Ac+W5wqRBN/vx71vTsXpXOZ31qfYryUUnHEB1qffnUKFmWRarW1qiaoyTpg\nlhI0m+oS4K7ehJs51NaJYh00g0msoQli84CFA1jLnnXk5Ku8o/bRp+F/nZAJ\nYHPBJnC0EOpWE+CDaFC6H85ljU8odKsUbntbRxShHsIy8GYY/BqM0NoZPAOu\nMzqJC0alclbWXOZDxvjCZ8AA72mCQ6s+shNCSBvS0PLPrhlqgJpGeXm0imCg\n5Nj+A8tRvk01slEP5SxD/UiCSFA1RJloZjG8d/VnegrO1kZX7eP7toa9FWPZ\nq4fD\r\n=P+xf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzfGf669PhvBVFA0l46QjAgtos4HRGWyTiTAx1Uy37JAiBIbpTQyNlH7JcQqsjC4iZVZNTbT4Ry2ZUzltAiqJoP7Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.926f5bad.0_1615493922322_0.22533131400789408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.520290a9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-circular-progress":"0.21.0-canary.520290a9.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-utRzyW1ueGsrzm59/xEMZlFgcxdvhHQz3NzeiRVi9pxPqkV180FsXo3W+NRSn/ZcAx7Qod6wb8TzioWuuEKQVw==","shasum":"6f5312dd925c52b694a8d33a9a47bc4cee7c69a6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.520290a9.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplpCRA9TVsSAnZWagAA+pMQAJAywRtknUKgvxAxkA3h\nq5B12BmBLxuU4QoVfr28lZZbo0MbtbVZf7y1Lm9aB3l6mw+6cjxDvuVN1Ftt\nMQbdkqGoCSK1Jc32Z+1wiOVrOEzAYlZjY55WoDVZKnMqZUksXj6edNtEK6iV\ntm3tFi1kUUOwc8hRXzO3+H90itw82Z7nWij9I9/NAZadm2kP27R7MCwjfjQ0\nf9YtJ7gFVe0JoV1AIkx2Wsa/kw1s6YygrOLDoM+/mdcCuWJ+vFDSfokG3iyt\nw/9WkOkWhiFWAP9zeEOzknAnPPPy5iXvoH4abuzRtNKQLD7tFnC+v0qSnlmb\n9wJhmc0BOQ2w/+TPq5MZcGQ0PHcCtWJh7XQF1A1csJhLSB/jPx75kcxf6cEG\nR71hK0TKVAAtE6QzCVAPGg89aKGBOr5Zfv5Cs43fTb3WjhKFfC6E/tZw8nIf\nj+nykxZri7UqYjGb4nsLaZaV4NzRw+r2Y9f/2i2kHNTTGUbNsRik4IktfIEs\nIHW5s3rbpDEJxnCZkudironiKcblV7RUpyFTmjFnCju14RycI+zPfk/jwJLq\nO+lpxpIzkduqkvrxy87M6vjja6O+uOKuXxFLZMTBR7ssN530M6OUCh1hk5f2\n5PJiZ7KoMdOljj58abM5NEnx10qXwmK9NsPCXEMqwJbpyH00APpejSQD3zpf\nI8+P\r\n=MDVL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgxjVqOQruze6O4n4YjK89R3jWiJrRP/c/ZQeE7ZGmyAIhAK1mcD0BMW+Uo8NXmEcref4zwAAk2SNdyk/1nwdvhnI+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.520290a9.0_1615501673377_0.002888839611187466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.9ec431d1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-circular-progress":"0.21.0-canary.9ec431d1.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EI7L/xHbDTMPCM+k8MaP36QOgxVZ6LrmdFobR+Y6MBHlI+Sx1DnndRlnH+IsdMCM9jBVGAIvzMfbt4zIoHZe6w==","shasum":"09430071697d004e840bb2d38c8e72e4c63e08d6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.9ec431d1.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppwCRA9TVsSAnZWagAAM6YP/AsSW+frNoFKzNvRaLBZ\nNbJUmSCA/EWRb5nijv5I3RU2absbsrh1N8egvkY5XqORfFKNqCv2CeLX8mLm\nkEwFXwOvEPC0j8oqGoJ1y0/Bcddz1l6twpRTTo4UVQDXw+m0/4PmwaYc7o2p\npENsUpFkqNcxZV1dIMaPLbQNB/+CNCqMJcCATJNJdSXzYzFQjjPl6s/xcpwC\nW7H/eVX8/M1JhL43OI84bpEMCD+wzwoBTZXMWWmxKI3lz1yV23iBRSIdusKd\niM9Co+T8hp2cwB7SoiXWhQgtMsKSsmT4rj9NdSCbfdConCDYMJawQsPAMW6B\nXt5F92ZwhVxEscZxlwYSCkAFTYhw/uTHFjBkL7KqhuuY3EYOjXYT6Qlb8+M1\nL08Mtf5VHG2RfbTFdEK1hCGiqAhxwypd6lEvxN4TSRv8k0ICbj51WngEG96r\ndUUo9Az2xm1gLLrE9/tpWACV8GsLHkO663j4JI75UsZyZq31Zjowh9alkuTF\n57qw0q+hiECJQ4weWeQcJKB3/g6LBvqeE09DJJ5R519E1cc9maaDrjFSpIMS\nws22KMGU7zfv2c6EYJlKsQBsYGhHv7ronxSBe2m+3v5ojQp6K4fIC8hWPWkz\nDYGKpkHKOzxiMxdtkg7RaOdbE37dgSGskmBHU4HBFmZ5MQ1nnXPK0paksHy1\nnEoa\r\n=jyi6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEaqLu5nlqH5NItZaCCE93scnuwFyGyCrlvl02x+gOWAiEA5OeoXcdPQKDmhYI09l9AGYH/FXnmSUBoPV+e1vQSPIw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.9ec431d1.0_1615501936364_0.23261910087315685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.4246c082.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-circular-progress":"0.21.0-canary.4246c082.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qA0lqWmMZIiTcjoycNl/cLfg5IMVy2H68cJCLkAK9wHxYNTT6yaziTCvrp/ZUrH8VnijaRNkSJxyP+yVURl0bw==","shasum":"62a50e144b091b06b5c03ba5923f280d0660bc35","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.4246c082.0.tgz","fileCount":16,"unpackedSize":43035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwXCRA9TVsSAnZWagAAGSAP/1tHwLR+sqzO+L2o4Hfw\nEUFfGYyoQPqLZ7teRs/vUVf1ajLWM1XUOAPsFu0xGYPR5wKNJsXsdN6D4UhW\nIXetopT3b+ioi7xljKo7W8MbryDp7kFiUc9PvXAtya+MSyJjtlIf932xjclg\nzReeDKDoDo82GvDo+D0/l/KVUnSbhZeqIV9dpJKNj15FvLPgRIKDi4i8Zzn7\niMFhKgRplG7d3Jm5fzslD8XZcnDyrbicv1oAGK20aXK5XOwqh6a93YDXy4ip\nl1M4qffcJshJvWQ1+qGQD6cfHccfsP0HbAsjLq70ohgo5WH2AjTbh6aeOYZV\nnWmP8SU+FGQatEvo6mEt1CZlVN1wIOpo0SwX7WEYXNYNso5SH9m23KF0780J\nqriT0BESZn4+AMCPZFaxuKAyNgf51jSkI0UkKyIRHFeUEuxPPjbfRH0+6H3I\nq+Osj0yGhcr5cgxpdQeM2BcVF0trqEc+Gr3Aw5dDJh7ME+meZFu9qvv2aSkl\n56nUs8QdRzxwwSeeKf1Qa8kZWpwVvMdeUakIcc7HX1dW6I1Z2+53sYWfMWQT\nIBdQLOVYBei1YNVJoA/eWN0RN62JqriVDRrV+0sVQ6nfxHxoNKtj4ikeMuDc\nFwfSwrRu5AqGzx7FBDInTykrmQa30AMJcQzfohe3OzALUgP60Tj2qAfVk827\nXWqT\r\n=EB2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8RNFLWCMIz06jJwEw1CWMhKmMeAs64dF8cPfYWQ+9dwIhAImInAxnNJSno7yvSeNoUb7iTKEssfrtMl3s8ECRb4Sw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.4246c082.0_1615502359014_0.7857576531788828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.2d736253.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-circular-progress":"0.21.0-canary.2d736253.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FNZhf6Hvlzry8ISTZybJRPoMSRqnLIY4JDBSUesEcJU/UPvSCkg/Br1YOEaOxGi7LSD+aQg6jxrKk6DB+epZDw==","shasum":"165300eb5f1bad5d1618703c0ccff1b0ebf372d3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.2d736253.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FDCRA9TVsSAnZWagAAYoMP/1kS6XovWPoE6IdIzcNv\ncMDsXSzh8JDkrJJOltDIWjMh8VdKG9nCOhjEVBkY7ACtYfHwLZPX2ojpiLv2\ntnUUzU6+MpOQyndwOgpXfuiaEsbKR0RmUjgt/nNCztkYMDSCprJve7j+0ZVn\niAsNo7fqeU4CKX7H+ee3L6Srsd4wnOact3h8HbXoUCoxvuC/8IpI95HlcjFZ\nw4J9vlUeBVEoj8Dur37r/LyY7VLGwcOl1Xa9K1iRETN+/JF4DmwIZ73tf7K6\nkBCkMKnGWk4zj1jlMYMTQDUR9W8+WRKR5qaBQQHj06QRaQ3oW0O2bkmWna8f\nC7YYj6wTS2K/AnRZykUuOng34pqleVR8CCZci/akfbohXfHx8PLzaC+lqqh/\nQYGXsjR8ZDR5Xq6kPvP9Lcgn9fpFIUhVfM5b2wrewgjT93VYhTSTxt2hDEtb\nZyO+VZXLT30twcR5nhT5+7hSyA7l6f717G/Sf8DZe14FenK770PqZ5ONZ+yI\ndIEU+N4QC1n2v5nz7XRO9acd6YL3AjprqT2nVogrtSnhHRRIkGIYkcdtOhp7\nAN3pfQgizYSjq0MZWVgmQWTVaUaZ/pYvhTCk0n6fBGK79R1QB00MKF7K3Ng3\naUBRW/JnCgIRfhklo2zLPyiScYuwCc+AOfNIap9Bwf5jYzQB1LTZJuj4veaw\nZPVk\r\n=BXTa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCy7Ynopj5gBUa7ufJHW2ePvQ0xXYiRGlQ9EKn2te7C0gIhAM90iEVaxVO40g/yswR3nOXRiZwMT3kdoKAU0LyzyT1Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.2d736253.0_1615847747451_0.30332521428834025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.7033124d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-circular-progress":"0.21.0-canary.7033124d.0","@material/theme":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xW3VMetADasyFmocXvzTH6HmebmYgqJ5SGiOU7mVJRzjISHlEgwRnQG6jfAzdnaYaXSlxCQ3vVRyITvfiOPuGg==","shasum":"c809f40627f8b90ae2c8a2a9a59d740f29fd0073","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.7033124d.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrrCRA9TVsSAnZWagAAyYMP/0CqkGu8O4EDsSWa0ZKq\neYGrI0YvhZ7e9CaMeZGOZ3nCaVW5+hNICud0xGL5GooOB/FqvTptFPmu9JlG\nNJ+XztCs3p2bbqbIJbszixPaGQqinmuKa5Uws1OIQXz20hsPpuUOjSSVjzZg\nXo1RLV0vnq9QxT5ddy1NMzJJeXWNNeGR78N+BqqDiEZkrBZnLZKPoNLkFxxF\nqyW/eH25Z+QhCUMPe650TyGDD/9b171FaeQwhISyfz4UXL45Ga0IvVHohbAK\n6b3LXZTPXTALoJgIyYabHJuXd63km8pktWzJKbqZFDbGgrBbQFR2tEOtj88w\nPYCdfFTdKYiQ4avc+7S5hxZu8J85U23GDmTcOUdnDUnROL+SHUEspQJ31lGz\nBYdLOaGRFhfFzW7gzOv+98dCMv/3Mgaxovcx5gjHIU6BlHMKony8WigkgpzO\nUf4EmN1+YbB3u/gReKEqTXXBqi2oJFV0BozVic6adPfm34PE9I5NzcGYczUR\nbykp0iQJK32dRtz03EGzExjRnolpturudWnDj32+tQj9UA+JePojI5AmLA+Y\nFuDwBGJCB/2puNkBuWQZSuaZfyHlYKjrgNtMXsmO4byE2FaY5W3TaTYkawp+\nXdLILV/EewQJj2dU0AyklGnHL5HexWFWxEQjbmKF3xmtIkAyMjWr2V0qvadE\n6Yia\r\n=tzEi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAa/sXTk3TRqU/ZqypBqa4FJrwNEqgTohNOvPWe5N9DIAiEAquGOog9Lkf5bgXuKzvTcwR2VY8J9sBRqVOMk16CxxWU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.7033124d.0_1615919850720_0.6560851424183234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.6c0ee901.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-circular-progress":"0.21.0-canary.6c0ee901.0","@material/theme":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6BMG9IS/d1P5w7W+V0kDAT0sEeCz4+PLTh23d9nuwFSSN7S49cFn8O8fJ9YmRcC88Mp9Us1CMxKnB2zELn14RA==","shasum":"c37bff2824e9f83f14b4a72c25f496e1031b0596","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.6c0ee901.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOACRA9TVsSAnZWagAAEq0QAJ5zS0pl/er/S+iXyk8O\nbDrfVqInuS+FqI5RwOdWmlJi/+ddp6PzvoXdQSDWRNjn4RE9eOK2MBepoTv5\nlvZlqOp1dQGbEiMIBG8+jykj+t17oB/d4MMk7/29iO6Mrw6gdea739NhyAmL\n+mEPy8qITTC7gngenwzTsyhr+NdMIUsqmdmlZHqlWNKc+cN1l6oGolex0S9o\nJjc9RkoJsXQkg86u3Nc4Sv8pEhGV93rkWC5CmBU5JCyxYyb6MRWE668s4Z+f\n7SEqWm+Yj0J7yp+MWg0rELgCCLzaBUldRiByjMyRZSENmVF1YCcajn8MTg/p\neH9/n4D0xI3wAypWGBo1DmI4DF5KSujjyRai0Vg/0LblM3nFiv96HzanhEk0\nk1Mg9KcYNGw6UqtlzRhCLb7G9sYFZivfUgs6sr+xvPTTmcTmuxNH8sNus4uB\nnj3iLjyQEjEkLgccpRm3ag2G6u1rxG2n0sA4JeuJgB5P75qKmyBWKTmSySN1\nwQLWlaBB2rMgwp2Ls2z0R2q3Pccjxg3VGifJrxPn1L47Lx/tCUnis/sqEin5\nLPBlq4Ixpj4DQn8W07F2rTxklwl75pgF9suZEezJggErG4D/G53NuVwRjegL\nbGLMXr2T15z/Tq/PUmpZ1rpBQy8a9vh6ntpe3NqJUjMrJxG9g+IjmBNCHvmE\n1kjX\r\n=F8ai\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCxkwy2LL4jXoUPOvxP/qWjHyKJr6YvoMWAZGopyCMaAiEAsBejKROo56fou1cS9vxdwpWIh/ktEdYf3FQYXL5atwc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.6c0ee901.0_1615934336349_0.6905019142944657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.7f0d605e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-circular-progress":"0.21.0-canary.7f0d605e.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UpDwHnS/zldgxHUh8dcogJcr/Nb7FcYfnFHP8Uki88NXcBmmGHOhuGx0pPw7ESlXYunLMggtMN3jjeYzO6Yunw==","shasum":"6598a8ab248d7d219dade9c635ab8971a87b93dc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.7f0d605e.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSyCRA9TVsSAnZWagAAuSoP/jXZh/SmEminl4V6DxJ3\njzo31+l+1Hk5p7v89YhDJsJ3qOqiczwEgpWyKr22RxRtXk/cEewW84t4TeaR\n7myWYtkmnBpfpTiRdwBKXVWshoyHckMeDpbhJ2OAv2otq7RExbIgN3SUGSCP\n/F8dqU5tnZxDrYBPbY81jkkn+Q0ngdjO+bFmv7BHKHz4sRdpJtY/FiqQ3lup\nDqEqwTLtoiA2UEDBkyVUq6f6QEnBFb1SVGbo2mlj9mFlRZPvv1osEihST3yb\nEvsXWZMeMFfVYas4h6bMtqdN9vndl8cjUzJAMLrt6h0MQ0jWk7UdgqCODRRh\nKHfRyZ5SdjTE3BwTz59wFI5RgV8x1uE3CbfAxIprH+x/X1z/oduWhBsS1/hG\n4yFZKLdPiL7TbplkC1wVmdERNMMmU5SD0OBGwoFNZpgjuLZzJajZEy79ZtUk\n+pq8z55Qt9XM8CO5Gdv1LCGRA2jAKezV/xmAwDAUoQlD5TACBCPSyK15EV3v\n1hTFGmCZnDqrrLIrvEYkMge9bCQfumtk/iZXuO5GTUtxXga7OWgNaoIpD+h4\nWUmlhW3/LMUDBq9B/rFTTopLvb7RnG/cGQDofh/ulxXnaOWsUX24prcZyk4O\n8rpr55U6evynIwI4ZEcVIKJbZ5wvqOqNSHKYnIWGQF4C6DbO+5SdsbBvFpqB\nyTaO\r\n=TiAz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDERjttO6ZaZAPg9rZ+RrpsUkaxf9OUtdFbkxTeNaJAhAIhANWY2dOtK+6svZFb9kv+++pDbdgzZbP78N6MSFhXsNgq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.7f0d605e.0_1616004274322_0.975486061801836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.572107b5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-circular-progress":"0.21.0-canary.572107b5.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SbkdZIqVo+ZqhiEeZ22cFrC8szDg3iKYpd5qHFrzKz+jzvpfY0WdLOUoco2xlqsCBUrA2/FeWrMU/LVN6JsqIw==","shasum":"18abe938dbe26aa3bc35c35b403234ca9d9a3cf9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.572107b5.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+glCRA9TVsSAnZWagAAQewQAIEreJhMLJZFtMRZkY2r\nBJBe0/yxnAY6KpdP6h1bZMVHnOyewUBk78FAWzvqsN1vqJPRMlq/e3P2qHjL\nNY7AhK9O+yRKZE0cySdOHBX0oK1OWyouD9hM7GqfKcUqlvFBm4J12jXW3BiK\n7BtmOkahEC8HgRp8tUFs4Q5/LFNpVFnMnVRgz9+uv+X5Br70twuWNtwZeSoj\ny7PtFlE9ZbvP9vtVyi6goEHYV/s9H7dfHE/hBfzpeGljFe3gKzo7B6z0OZnr\nyk+YwcGwocyJqafm0Q6cj5GlMYDiFDcggtJEhV+242SznTEgl/TmTQSVYeDX\niC1i6J7kb6eLeXz51Fw1BgAPADS/qYsB7jHTn11EWELqfRibdqYD94hoF8Nn\n/kDAnXT5qQPtUK4e1YYUBW9aEGpJbhK3qmP4DbeJe1noY7SNKc8TNE7ppjI2\nnmSJpkNXVV4svDvMwLLyG7roL+PA0+Lo3tCsQ9wD+tSCxh7wOd7Gzezjdfly\nd3WUbIXR4iSBYTvKmDyxIjNzsueW5V8lsXncHmJIpwtKeF7J921pj0Nafz0n\nfnnWWcbuD4D7khyhCo6P8ouoUuExHQvIDPF2/qCEHqHMiJuQqjUSbMJTAifT\nQSqhfLPPd1xgxYAG7mpDMFhm0qpJfUbAQRsw9kKbiI/+qDw9D3DslVqwXzzl\nQbb1\r\n=+Zou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDImgMG7MSA1Fn0S1SaNSgIuU4N5kAaUWLByaww/5OkfQIgHlUyy1OwgyT244ySRIAXKJaxxefNgn+BEFoX0PlyqGs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.572107b5.0_1616111652603_0.33915705956886955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b7b220b1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-circular-progress":"0.21.0-canary.b7b220b1.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LBBniGh8HcH7UBSYMRCk8H/M3+0FK1yBYoU5UdxPHtdQC1r4O75YrQWyfHtHN6QoZco2r7HQDfINRnIHH45asw==","shasum":"e153d9d584546f73d1e54aebd9d50d376dd9aa35","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b7b220b1.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4sCRA9TVsSAnZWagAAj3oP/0rQD4Kh6SVhE61jUwBo\nh2xLRQ0HA8Y6tVGgCfecrmgiPQbF5xu2hDIYG3cu4LZIIbWQiWn4pN0Kwbl/\nIw8HtZm4FWL8uNRdtQkM/neicmv66EzDm2+vAkM8wflkx/q13aNv+soMzRAu\nz0g3/1aVvxTrmbGl1WOJJqNyhXVBpCXQuOFmJuA9JM4OBq/9ATSmPletOcHb\nLOYg6DykJ/kY4GKc1ubZ5A+I0z6DNEZ9HYEw5KIGdDWFGKRaw7mh+MpFS2ko\nEmqpr6p3Ar0u9vRIrqug6OyYgkTM5Aqrmswexu00jhywogUbGoTsZ7NZI1bT\nnViXfR4By81anRpkJp4kmCqeMvsHTHr3S/zL3PRW+Dpw4kR3K/exeEMX5nig\nJzFE8wlyD3Vtt2CbJ/bJ28Ki9XbgGPowF2+DxrwmEyCvbNXZW8d+d9ZcAS8h\nbXJoT3zHB0binRLCx17+7xc7j7uIGimFShw6SAvK4I93ppu5HgkUzKdclSaT\nfciC3sK5dfJO2SYmhhxXfvhYoZJsAjM3MDO+Y35xAOfMEeSZm7L7cAN1QusR\nVdlE/sWQwkDPWRX1T0WQRplMNIbpN3BnG1sqsPFHrpXWmLXdX+Aep8ejZmJ0\nWWn+mNkX++kvDAuHWsnPu2Q+7e7+Ur8mGgiiyhXGHbQPgdnNYPmHkETTM/We\nClTV\r\n=ghwJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiNnix7HLrElZ8wcEzw1Q6zXwZmFW194xYNjWdBswPtAiEAmmOOx+mtV7g6MXNrdYxOBRBaJdtdGr4/fZ9k381PIE4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b7b220b1.0_1616113196247_0.1622427800293611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.233b2de7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-circular-progress":"0.21.0-canary.233b2de7.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gLduNxN1ULcv2YgFOMVBavIndH98vs98wOD4Fkq/cbYuNIAvcrZXM+3G+teFO+JWZPS3KjOro8sVKB62vq/kSQ==","shasum":"f8c7384fe858b8df1eb5e77502df1979c3b506a2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.233b2de7.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2jCRA9TVsSAnZWagAAf8sP/1/blv8PSo4PMperzLiK\njDMxwDjrA/1ZV0FutUI2Qy0lf7IJVP1R0TcVK4pVkWRO26YcvNHYjLZ87kxf\nLX56oVS9TU+UiaKG2AMF/g4b+VuvFbUQvaRkGlxTRC/UQet+w8B5+UdSr7p6\n6xKRBzbMEA5uTnoW+K6MMCcGhbXR7gzs7DphPTrd0arOYgr+bN10t8FdDDYW\nptd37XV+Qye+kibb0gI1wmOlETFW1E6vIPJUccL79YN3bl8pGvo/ZdPfcpJi\nkWHEURBbtVJyxtviU0UXZgyB+4crm27N2/+5+K92LufyhP4n5JnMVl+JMs3O\nxIsStMPWqqRKgWiuOlrrca8ziE5O8mCT1gHTqkk6SfW5QJ2I1pVAiiKJXml2\nwFoV/59F9/s+J6LEe3ndspwPZ4wQKl9//GE4lgZSHOz2foxpoN86xFBFLx99\n2ldcqq05jMg93H8Ipc+jlrdOc0gADvHEWu6Kzo63p1g11v8NJdWkk4+PcgGA\nw20OLd6+osLcKDGLm0hayTZjbvMFnfSvjYiYJ1P67V86WAPNpQL15NcXBLez\nK/p4RGBu7e4umwYu82NrDlhup6ybIN0MJ8j28i0f/tFmq9jgxlU3xxRJj1MH\niKtw4gDAEhJ2CMMp2XJiP0AeJysHOGfOU82QcPfKXri4t5smRORhIelmb92f\nK80q\r\n=HE+l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFo1Eg2dB+K1b2ioQVWdGHnFijprUVbctPX3AON2jKPAiAUQjHkPvATkm55/HLfPIVW13QV+ug3mhuz5narLLVEFg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.233b2de7.0_1616178595364_0.3047574535321209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-circular-progress":"0.21.0-canary.0c1a2d97.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RMH00DiwtXKlltFb0CBV2dsQTIAh15K1h2RvZHuQHgc0+cXdxm7BN4CK/HKTvPIDm5r1SgACoJgDkPy+0x4I0Q==","shasum":"bfedd135a98d5764da6a982b9d7f9f4d1642db62","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0c1a2d97.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXICRA9TVsSAnZWagAAikgP/0K0kG1SUKw/YcYVTK4s\nenVZix2CXGYHPU8mxABSUZzIkoFrPSM1y/1EC1K4O5hRdDJAMJchRHWOrR3r\nvwexhmLnKjrlBE76A6MDSITxOk5Iio6mXLXLPA6vYYEIaxEXv0poOrJabVa7\nSvWHhz1FBpEL64FvMl27Ma4PU15u8vvXlidjWrj6TxetY1yVhhNTb82zMejE\naw0yav4v6onIQ35pp6TAZdTEMQMxhbGeGLottIELoutNwXcMXJbX8ocWnkgL\nyH+EKS0pRN3fCNkWOwl8tx0S62yFGqMEvbb2tAeGujc8hVdvwfx2/ybwfDim\naLtFBWaF51N3NTMnGeR7I727ZnQclQ0ci4hllURLW/jJG9y5MP4HKQjyO1RO\n54tI1b5hyCGoHdGaBg837X38vjAVBhVCZbY218gAH5f+eecTCXuskC+lOz2/\nDxOp8PxFyPbyssBpABTjIDoY+EwEePAAbEU1vHGbIJ5OzoE2BtF2TrOMSUZ6\nHLLZtPBa2D4Pr86CSAmwSovPxlMb2DJc7z5ZGheyJDcMG8nhZ0kJG+U40esO\nB12LN08WQ/Xwp7EE4Th0sKwEHqc/jWes2UGL8SlCELxexW0otpj0uoGzaafl\nkHje3BaZuLYHf583nwiA968BOk+P7uBWjMYf/ygGKvbO/l/9NgXdwb+1NcON\n8wJw\r\n=KosS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGEyThuO4us2ICuwZ0iomUZI6f3x0MhCwq+yPWS7RxLwIgVGbX+DeuPupjADERhVppBl7upHxVeebAhLj1j49sTM4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0c1a2d97.0_1616188872275_0.7239586366912878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.57ca2e73.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-circular-progress":"0.21.0-canary.57ca2e73.0","@material/theme":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Bf31gBrNTomkOUt25APZkZoHTI1Cip8Qb11CYLO5SCrH8fn6KlLQx4JGJ87bfjwhYYjZiNrXuEAa35tNUHqU1A==","shasum":"1659bc60d80d28668559485e70b3c792bec62e56","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.57ca2e73.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShwCRA9TVsSAnZWagAAz/gP/2n5IRN8oQcm65b34uor\ngrkOMZX7c3Z27cjJiZSa76YrrdMjO/qqEPEQvf1HTc8WQiN4Y5DbHUJ3bSA2\nUFaqulsKg1hihJW4uRLa0dsh7kPP4+gtAFupbv4HHfHpcYqQRVCj4Z8aTAxG\n7ouzN8GlWV+2rkVOsj+OmPoJ1edljhNDwU3HV5ZwKwgnX/U5JnuxuJQKRKF/\np+XocC5CZsv3wkLKVWO2TEiw1pBmZCh7UFUvhvUzApyg2CQbsdkeK6KsY0Ib\nET+P12D6UvbZLZTy2+SmclAv7fMr0PLjKXCYiuUXzCoBNKim72pAtnC0ibHG\n6spHhwxdGNvFNF6TcrB4SK89o9m586w647PoWydz1ohddxtCRw9QI4T4ZDO2\nHn3Nzj3dCoLH/klzjtUqi8ouXhsVBJbPtTv7PfXGv9i7pAM+t6Ie/6KLydYk\nA4qEiQRvVtDBWlhIZMnyf/gcl/D9eHYh/dJ8Gbip6WgqUEc+ZTJgbmTiQtS4\nTkh5b5kUQBH/aB4c77yCdYqlEdRmdffgs7qCENuZvqGW2Una7YYg8EYNG7HO\n6NcV3WU84hzKrhKisdMTUdEf9JirOxX1l3D2SOHkeW51FJU1i0rAQBrLq7z/\njFFMtP0lYNmRCTv22x0l92gPnXABz/EyUJqdsicDPojq6eOV1sWhJj6n/ive\nT7eE\r\n=zTmb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsEXqAqp95w0H9Y8hz+Pd9l2qM40k/GEKXPpIMtv2jAAIgEwUdIJyNiyCHUiZ+M52p02BcuQ5CCB89701+od4YjH0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.57ca2e73.0_1616193648083_0.41746559713567977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.5c058f4b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-circular-progress":"0.21.0-canary.5c058f4b.0","@material/theme":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Z8dodU1+vpbQFQ7wWPrB0VzDVtuzz6dzq+3+yy1tKj9jLqcbi8Ng03tmdu8sopx63/id0MaEzHFfGZx3ezhXDQ==","shasum":"28eed896dda1e7dd0c258237bde47e89271a1adc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.5c058f4b.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTpCRA9TVsSAnZWagAAQeQP/1u79znK9SPuS1bU0vyc\nGgj0tpmG9BVmMtOEPW8AEpTN2HPGjSi5qt+C92ZMkP514rftcEjdXI95hkrg\nyK8R3O02kJ+B/gpSQ6B7VI8U8orHhHaIiQclpXCH97TNqzrrNjLI7/MyCXrS\naCmei7eiPUN7qmjL3cC+NVtB5x1Wn1L1WscA3JV1UsVzJNHpFJoTbNbteRaE\nIGA6MGjySa0LT3kor4Q6N2IFXAk5oiEcIu2PU3B7uQ4LfeDxOTr/NIQN9/ah\nJJz8UPFdixBwkSFG3Z9oEneQkIL2pqbYWXEN89rQw0x8pTLrMlmOUgXZAYm3\nJqwBqUf54OIh8lT+7jMy0c1cUgRCkbsBR9vM4rUVT1ZclwDZ7Q7ooYgRnokU\nbDDkF1ol60hwjfHWqCbKMvF/x3I3wa6qb6xYIrDUP9+KDaqseV8Q0PJSnCKw\nDjqSa5I9xJ3EsBK0vKhqW9VSFsrbAJ5jadQmSDgZ68Aoure79jFuZIBDuAna\n4HO3L6e+FEtV4Ic5CtYSa9wkkI+2B++jpIxJJF4MsjfSMEU6vNTdRVkdcQa6\npWNk/0qdHxq67IZOtaU01s7+ElQbmyAaT02OsMOIXfeSNv728i/O7CEwWpcf\nJTVWpA/aJ1mE37RRTjPf0qGMBIk9jBaV1wit7/79n3WeXh7RgSKhiPHckokj\nZjGx\r\n=aKCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICO1UJ542HJ2KKlcqaEAwkCYMGwrGiAxN22tgx4sYyCPAiAat5+aCf/Y4A1UCuGRKTVAwixKxf04MTsOKkmfOVnnwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.5c058f4b.0_1616540905455_0.6136623376037174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-circular-progress":"0.21.0-canary.e27ef7cd.0","@material/theme":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TdjRws24TZ/SB+r6BmfRBNkyMNFaim/WPZSyv7r3dUoT/vJdExyqs40m36N6/XjwKHMipQf8ZhfYJs+EYkOm/Q==","shasum":"73c0826c3bf4d00e021962fd969688bd02895c5c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.e27ef7cd.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XoCRA9TVsSAnZWagAATs8P/AuVV72rkxbDM3fr7b3b\ncuVUbsQBh8n19OMh7AvDi9nRWDEv5+jDn9lhECFJPhR0Ej+bEsICLRAOGQrY\nZqB1e4S5OvIyls75VqDPb9pZ7xhyXGa7v49KjLYFJ8RzRH01L/sNZWhxztPP\ntp2C3s0SQpjDwwcnJ8Sj9UtV/L2o2KNtqF3qHRcg/2FkNidW+nToADXf1HwY\nliUC6tevBziXLNIqVgw76GqVZ5bJhLDk8O+zPeQgkgv0Hub8BSqkG9tdUvaC\nziYimnrVPT5zbjuYz7fUsGbPhlzPjQq7+IiJ22Gpc2U+yphYcY0xaXxnKs1F\nFpxe5k1O1dn3aN+R0RdJEy1FrYsz8atDWGp2hxhILqSAtyWKblcWm/G1qoDv\n+YagTDtbAGS1mXoCwpB7cukwHWmewPMq9P13pqEKea7bKliFPXZyn2hrSk1X\nGQwoSK6C48OOGESpyzhVD6N+2TUQbFFF1FVnYnrH0fLJmHQVEqowP5whJIzn\nTKSd7HLSqO4se4zkPJWzpvW6RwzwKwhYOoaOqnu1D8cjU+TT2GXOkDq+zU1y\nM9QPMC0R45HNEVFvCfIQge2SsWOLrd2OKt+PUUHB3JI18xxtNO1eSbxtVjYx\nZ1qH7YF4FI4rWUkLrPx6Gm2QCuqa6OxA0mFMi+x/JUcbiJc2Akm4myVI5laP\nuwvf\r\n=M1w0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpW5lBIZd1ONTLRIRBAlQEQH0Di/QN/Bxl/QNfKZ5zBAIhAOhmUUuDIA7VnNmW8qHcGYbTpMAZF3EfVV+4fst9iG00"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.e27ef7cd.0_1617135080496_0.6010677188390356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.15c09e74.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-circular-progress":"0.21.0-canary.15c09e74.0","@material/theme":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-h73yuWub2TxBD2MQZsNhQCN1kXcKWH0v5rbnJHSwttWauMvweh0+vgE2yRUJx2uPwdYfTGy9aYt9m8w6XE0brA==","shasum":"29f7bd3b40af7c361ec39875dbf20cf77ae94723","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.15c09e74.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKemCRA9TVsSAnZWagAARAkP/0Kh/uROw7mmOdHuqoNY\nsbmtXgCeRmR8nkaXZJ6zLTRluUxFDcIWfz3oMjHHID33Mm5PnkwWdbsoSmv+\n3nCrrMPFLS4gdjqF4LaXdZ1y2jcXj0zo8Z6NAqJOko5GAVZonxL1gK32N8MY\nW2qLGFldLasGCoXuD3IWWGK1Gve/5KZUoPNQAptPw6F757zcp2JzxT6a19TB\nU/mPoAVa+0zi99TkkbpPcn5nLM5Y4d1klO5UInELauC4cPrgNcRZxfKdBS3e\nVW+wS9p4aZli7UPb1fjo+HYgdfsU+iXOrOJcjPgPxLSozmMNLf8Lr8sYO0qJ\nUa+yR2Nup9hBvIW+l/WTNWjONGggINZtCheLcaBqGk7SWHqGUHeHDOR3rT4F\nZGdHbLpbmJ8sIdQjNmGd8aJ/NzTgn2bRex/kR7AVy7nOjxx0gaqgkGkwG0M5\nKTRssK2N2FBSZjaZ1ymBLW8MIbRcmcLNMN1+s4EYOhoYYnJn1rGxsLYZ5hpC\neu2QYNsiJMBSoY2aPrTGi9XH35fp5snkM7w95/F+yOB2SNejVADAhNVQEt5u\nqEMGLlLVoFkb9++ghNrHd4Ds1AYO5iSLpelQkv+m8JgcAi4I4oSG0FhZp6tM\nLV4468fISP6RzhzjQDQhsO/z7XA394RTORmvxMRjsqkSx58p8LVt0mvKY/2X\n+Jjn\r\n=1b2d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOYT0PS+Lpb4BxEidFV1eLnsp36V3ANSYPN9y0ri/ydAiEA0Vkft8zck5s9wBfuo8ZPVQYg7pzBi+sfntobpQdOnfg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.15c09e74.0_1617209253290_0.4808114655973914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.4dc32be3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-circular-progress":"0.21.0-canary.4dc32be3.0","@material/theme":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KeZp04B+bINoyU3pS+zwoFXumN4/Xl3XKmAYXtRpJTOKbmhsszWfQrntNE9zP54bM8TH2WDAMmimmojhYXXlDw==","shasum":"b0383cd0bccd147dd68c9f59e22a8d11d63fab22","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.4dc32be3.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQo6CRA9TVsSAnZWagAAbgUP/A3HGMoo1IHbYrpM9qKZ\nzkd08Bso+ssV2/LHVBfwGzjz6lqqaR2BLSfx2EXhh0JsamnQYWGKkVV3qBtP\nzFuT5YU5rVsfZ6tdGmSROu2fBPjbZcI+u9gSe+R7CO2V4Zn5qeZ5GGcqe45u\n3j/ItwjPD9OdIJDNXwPuPPuMwP6odM7AnepEeSFTnXFQeE1v9hX2qJ6jCgAW\nYv63rM/gnx4HVplbCYJnIQ1UC1WSnSb/3ejHUrann8q+LH0kcVQu9x6WXol6\nAZlfA2mIBA3i3ZHs0nB1UpKdbsV9Qs2BXjKQ/KJO+rEP/OLnDFpDGdNdADr6\nqMh71wfihd+/dT9wtZdtx5JwkKcgEBihzSdpF1lTMliEv0x7p5juvDzOQWy5\nBYoioGG8en3Y6ngu1o9L71szQu/nFK1lLUIqpFmcvW4zYix/v3gwQ4nwex+k\nRn9uQpJWbC9khODppRwMzvAAGMvIAnhlWhoH3Q1XQ2CsoI8kjApzpjQnl/Df\nlUClJNoJq7sHDm1xa1Y9AK3qhZa1raIT6Ojtw4g3MYY1F1jmzr5iJoDQU2iN\nUyyJnxknoJ+xa02oinxsrAUR6TWyscYVQD0pn+TvMxbvATWo8SwIAEz8cT5h\nietsPzK0FIJb/LJfkr5y7hmOure9BVEorKvu7S/5ivL3GO4A5Zp0yJzBlI4z\nMJ2m\r\n=/6MO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/Mr/BheQBfL1wOukENX6aJpCNkvCHzBRr9MH2/4OLtwIgGSRf6Zld0Hg40UrXtY76RW/si6qAYUWy+zl/Avl/pY0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.4dc32be3.0_1617234490488_0.46178291613868283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.4b717f65.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-circular-progress":"0.21.0-canary.4b717f65.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+uVPFNCu/qFGksM6uvXRhWP8G76W+jKK/KbLNXfuOGk7utpBHbgScBtucIDTCradLerdHrFvzf+YseQEGrOPLA==","shasum":"53e74d1a0133c3504d19e36d81b46ca5511a914c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.4b717f65.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1/CRA9TVsSAnZWagAAHcYP/isTAMX7I0Drvkk4N0IM\n6EeFISbJDj4PfyPz5Yh5F/E6HElmN1nMGo4yXDQ0FiUmEqMUZz56LfV5aDJ/\nxSLJzleNzhWwTRZCPxnE3QwoW/HPv+EoZMdbiyF/y/zKHNuMEPrUXl183Pef\n3iNvk61OQYRpsLXSiW11uyiVasguUJYZukxcK0vAN72wUScbC1lFCQAsnl9j\nPe4XPDGO7q6hBaDr+GJAydsLZz36q0Xl3pQq94j8cUUtdLybDVeWqgrMHjN9\nh+pDNuU0oQMV5YQXeJ9aIj7hz27PqtL2HNpJgvRDwLy8eEpTq81wIXK8teU8\ngn5j2eYaXZUuXwDvfB4oPmE6lX+cIIXB0zpDmsPMftK9Z8g553wXR0BcKEyj\nSReB5lfX9njHLFKR19Bxb5Oqg9p79kw19Pq3FC9L6mC5q3aSUxcy5XyZ0Fh6\nZyO+XXR7opLAO8lJVPBRvNOpZpAzM/ZaRMaNdINQZkHKcHrbD/H1qZpaI/p/\nzg4MUmEfqiEiZL4nOs9ZA5Ww/zv19ClVvYbekjtjEWzeltsiXZvhcOYoWV0t\nHRqvGFWzdHYJEJW70X4BGcKNmhAvR92SlWY2jvaRcu3Y7fIQbvPR/BoyPMTs\nCUp8XHKUMW/2qtD+K4rgn7j/b9jT2oi+NgKwmbVjjZeMBGtgM7uHf57qtIAV\nDx1F\r\n=UCDH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvz7FOl0aBUK1Sp7LjAIimqPog+1vSvR6RpK1etvQFuAiAx7mL7pyc8EwA5NXF9ZRlo4wVZwTDokWQ7sdXY+RgJ5A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.4b717f65.0_1617300862523_0.4485784767713734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.c6870f20.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-circular-progress":"0.21.0-canary.c6870f20.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ME+XvAIT6CWhVJlk8/LpfiFS0TF0vnnVXTQAAVt1L+qPoOAxO4zqq3BloBOYlpoatyPOUK0WV3ew4ik/I1paew==","shasum":"a077655ff7518d635a439e299a3e858782116b0c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.c6870f20.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpMCRA9TVsSAnZWagAA3eEP+wRgPbiUn/SusTEZCQ6c\nHn71bYHPgH/rk+4T9SXoaMPTSNqshK0e6TsFueSGgDYPNOXeCMitQWkr6Qo3\nSpUiCy4bnqXJpdm27V0BLbS7dmB+9eGqEQVxmNcbUIFwXW4HEB4wtWR6LwrU\noAZEzbxCPgwMgfeuUnO+V/YU2xCOk3JJqEXhCc9E6/eLYKe9hoHHNadPfV4g\nNgCWl5ikaoMkhtwoAE7RbD5YVvctMhzloMxKeXNVHx1qHz7cpXhhsY259jnx\nZLq8xyVt+ttzrLWfjTTEuqhk7ttZCzvOJ0iSJBU2+NBAoWxt1BPSOssKXNkV\ncIrzedBzkjUyeuoEaMxdhw5PdqKCCfMGkrGG14uIYawlcShepFIz3/s7Kngy\nm7AMKtMlMof3WoOm9FvG9JYUWNpW77tgwVsS+NFe/ONweyXf3HAqxHlym54H\n1mdjFpzYjlmYXlY2+kGDwjvMNu4merk4aM0s4CuAH3Tod28xRF61N2O2la5Y\nQDPF86rCe6Cg7PDapmBUy+TADmKQd3YwXsX+0LfaKQOiPAOxRlxjPYhSjTHg\n1jhrtRcAceGkJG8x2yLzBM8Qehco1mTm6NrwTxXGXKW9Y3PEz+bKdhXw6sek\n1rVS20v+9Dn5s84/7A2ikAp6HILWl0Hh9enIPMkTsOTJ3xR8Q66gMJSO9FnZ\n1t8P\r\n=OKlF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVQUrBwFUa3e53PlJNKAFC+cgMh3FbNry77+AsFmo9YwIhAOhJJSCBLZzcMovPvpDnqaeYd42pv5TePWGgfw7LTGbl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.c6870f20.0_1617320523768_0.08884954605028295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.852f873c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-circular-progress":"0.21.0-canary.852f873c.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GO+2thiDzxbQwS7ybCX5Uf68+0C9DTjrl9c5Tn60Jp1vLjK9YJofTYN/jD25ka6x8pblgL2d6GZ6pbCPju+Q4Q==","shasum":"668115005c1cec4beadb99ba4fd0c314feef39f8","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.852f873c.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqn/CRA9TVsSAnZWagAAzL4P/iBa16LT8VzW0GAPJhN6\ncYb+keMAq4D2VoSENGGdi0owOeVXrJmlJiL6sM7CuDCIdoJQCQTvc/w1SWp2\n6Qb6GJBydmH0GJ7NJ2oi9YCCxbva4INZEjhN502aEtIDzr4KxQxbaCHjLWUC\nMbO3OW3g5pP4vi0lsP6S4BH+rPGFa4fVfZVt7CStgsAlw1VTusW3O5jvlV2d\nOofbqr8UKy3U9kNmZji+f2z8jk4KBvweltNwVqRCi8dQpE7+9OyzqYNXBgcE\nTf2FOxIrNkTUL2coIm9D20O0jZPJ2/8dUhSaEEP6Hfv0lhLpZ3sRYx7OUjYe\nxc7WOf7j1QTCe7UxxPfZ+xzEu1cgJ0026vZnW20MmTxaKmYuALhtclUP+RUB\nxo6/pHY55j7oCTadbISnNR5K3qfHLXJoYX6EK9XTG06k2RNpHcuAHuksXWEf\nia1Ph0rBxIsUmeIL2janMaWT7bHpfTACykstOJHdQJ88ipwg4KPIeFjqsg2K\neCA+NJpujGhWoQ1gANYm2Lz0IkjN26qfjJyiEHWT+SbJefK2CIoz0FT0LkKT\nXcAZNAaHux3cLRCtAUcg2fHa2TAzhlthqVHEpNr8e/1j0mYqpXJHfxPa7YWv\nxgkVDQvS4aM0qbynATiOifIDXKkhz6wjHs+2/VlRbqOLVP+dMK1l82+6vS5K\njD89\r\n=ndtE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRlQszzLz/jZbylDUuMIjyveE1cf2VV1ui/2dbkFGpSAIgFGe8CNCSBLsyRVVAXqQ0DrfDah+CMO+woCfMmENAEpQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.852f873c.0_1617340926717_0.1847363723824733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.4a674a1d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-circular-progress":"0.21.0-canary.4a674a1d.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-s+PutSqVLq6BHqH3TmxJcLS3kesrPF+xRBhSjOG2vMQWnDpNGptXx3ZUZGtCO8O2jSozREDOdDjHYiXi8lnGCg==","shasum":"4bf8355cfa3de4e28c5bd8218b4c4ad96bea6fd9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.4a674a1d.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3DCRA9TVsSAnZWagAA1mYP/A+SWxDPIWAd38coEMcO\nVwWihKCBc16/Kke1CdgSs2YbXDBy8hyEIfBLnjArmXsdxzD61zkZAwrB5CKp\nx0YPM+xPaT0HIzzmNmks6856UrAm+ZvQ2mb1VurN7CeXO8YY0iK9u2Ivr25i\nlCnYQaJHYcy9taEKajmpBR52W/dnEtcAu3X9wKLUyfR+EMVlIFQ+n+aQejcS\ngI5Ii2JQr4A+BtTJ4jptgfbITHzAIOsTYHMXd+g6mNxbRrgTuBhvTkwpVeXF\nBqW7sTzwkEKRJOS+ePwZqvA+q65V1JN15LDvm7/tocVH4k4IKQomKliRhS4Q\n8Zp15yLVlZFPhl2QythTYFtREHtGjt77/hY/fRWk3Ov4bAhUTTm81p/ay6AJ\nNCcXZVPic7iWTdgrsSxdPkRJtxarFeEFyWW8usTa3DJI/V0AkkU5rm6mtvt+\nlQ+sydCVdcV28vIRZEZertRwWiYAPGM8YTmYAKXiJ2U5bwmhqeC/obyOSvO9\nuQ2pEbbpVQr1c1Le3Xz9GFQA9oDq4gr+3s4c7lljWKRRxt81dTshvjIZv7An\nzrh1seTEW4NZZzM74vC8ScTGK+D6GBRqSCSlyiDaeadvqsqPkJSrmB9u3tJw\nYuKvDkslDP1j33QuJXb4QB3tD13O3NOgl8TWMqRvNv6ap6WOHkTNGLpKxec2\nM/66\r\n=/8Rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgC+uOFzZRr3BWkrsY5TPhuc1tRxLz4fKEN56R6reOJAiEA/Br3FUo8kyrUS5oF/UeRG3OShIlvm4kCM4yVdrca9EQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.4a674a1d.0_1617374659410_0.7251877766577457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-circular-progress":"0.21.0-canary.c5b29ff1.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sHdpiZGjzZyOq17FaDrD92PcXJRvQBkruyqPr4/TQW3C19s/9FhMZf1FPO/zJeMsVRlf8ShkXlUHpSiroQzlNw==","shasum":"7581a43b2826b5dec28a95537317d3364eaedb3d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.c5b29ff1.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03FCRA9TVsSAnZWagAAH18P+gNyeAJLtRFouvUowL4X\ncRms5cmiUHspFX/TeXRFdQxia2XCj9guHercQAa2OOWi7av/paPgb9ZfVYxT\ngh4b7rflmybudl6i6XG06Jpl2eMzMiKsb43g2vFFFBqXfZ4t538sUNu+MAn8\nj87RSJxBBUX9pxvLkrh5FVofJg/iwbmJEsynAfigQpvLVNUI6FJiyJYbMuTv\n3oyZJP0767qryCM76EnG7poVpwVCS46FtrUPLPWaTv8ULeWyyUUQtIUdEEGS\npI9ZsYha7SeoWjXAMsSPRmKVh8CYBQgBYQHmHPpYNoYS5zFpEqrVFDNtmgAS\n9ZxgAQEnnap276YHLgyknlq/CS4ZvCpegpF5t/B8wSqVGxB6jF1+yB8GTKio\nA+Y0y6qvQMV2jJ5cNpVgDS/bKYqSlfNmQ9JXe2kSxDDbT1XPUeJKUwk9bHzH\nVcGgFPNrl1zK/i8F0LB2QewjbjITdt3aKHdnkPRaun6Oy7IOPY7mfWDo4uJm\nWxxFZxpn2lYj5CWmwwE5J+20x5UyQShqq1jT4X4P/3vU6DxeEd7PTOhzaAIz\n23Y9Cp6Cpdl4V9PnEWQyyr0mj+l1JGBslwJgY93gkqXa1GRXxfEcCRTiVuRo\n3mBS6nCNy+JeMIZsu32x3NT3Zcmrz8ANu015eWOmEBw8cYwkGO6FjnlpFQIY\nMIRv\r\n=bNs/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfGSVBa+kUk5mrYiIzBWDbN2n3/TlFixqt+2yr2gommAIgXEgPqgwLjyT7uf73DSIDYuSQL6Jltm3WpMewHhF6m+8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.c5b29ff1.0_1617644996776_0.04250622408150351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.583644a6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-circular-progress":"0.21.0-canary.583644a6.0","@material/theme":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ITyeZ1Kmo7SqamdmcwBwWAyipE2wtJVglQzSphJPPZyyyFfPThtGcwCVKwf+obyQRQOOCxqre7cx3LAPk+NbMA==","shasum":"80c9ad6d198b93becaedc01d8210f130aba7dfdc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.583644a6.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04FCRA9TVsSAnZWagAAXnkP/RMFQotf+Rm8TYMDCa6p\nbQ7hlgUa2B3xtWg3yL7/n/IlpNy3tDjm+HjWSSzwh5JVqKFP3MdDq2Zg75Rt\nl5+yofWl2Jrii2TTYcELZ6tTef5s+q5poyqlVUvMZz3Ob6AGv2HewN50nPlY\n2OfuHYn1DabM/4gtqs00q5V0aG/mnsRgcs8J+GXHCcLFI5nmlUiRuuYdPaQA\nEAEsraGHLmNs07sEa3mXFvvwv7tqGL1yw6ltE/Xw+dpPizDhGVSWGRTrYQjq\nk1Mu+f6IjIZyaWC0+sVUEDFS0KzuKMqUgRE+xy+WWlnspl07rSba7Wuf2uYG\n0y3SNiBk13r1Fk+bxv1Y37Mvz0PCg5tpqM4VglNIExqNKjP1BL3jOciwJ/i3\nk4amZqkm1e62IRU/wqooqT8o17XdLd8ZpWzPPIDUjWXiLrBU63WQlAZ2V7J/\nMYg7vjfyjLC3r6bQt+qtLCCxRD0Q51NqVBoLM7WXRYIe+CedKylfMJIRDGdE\nccru/PSMSa8cujxH+RQhHChZCHDbBjYzFpGAFGIsE7543GdudZBH9/GKEfHZ\ngB7TjLFsRCUlrkxpWCiQBEBnwPXzomTvB93XKjPK6+uQzA7FDCyQRFX57ajp\nQE/oFE1N0779chlRA4p2Lyi9tRpjE21jf6xiEVf3F5hq9wNAGOMPZo5Oytg1\nR0+4\r\n=jYEk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaIwhT4SGG1IL2yNXmCnNQXd+nN6umSfzanQ3jMEEkxwIgD3Fn+h4MgBIZ1f5qXVwwDj3ktQ4qyrGkx69jWzCpybA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.583644a6.0_1617645061050_0.4191981409610226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-circular-progress":"0.21.0-canary.02ac1e6b.0","@material/theme":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zfyJYbQaoDGTeTlu+tA4Pv6aQkGnOy5q1vz7xUlkni0hTNhrfZDKPaPr+yPYvZWJLp5WZIVQpqjo6Khtvd+GwA==","shasum":"af9a86fe1c16316eda7e16c0d50cdd4c5d1d83a9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.02ac1e6b.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKogCRA9TVsSAnZWagAAILsP/2zFRFKI7oheL5pvzCYl\nU4aRskanAEsaI6I9u1bK5zPErjf4zbJ0EqSXjhBBO8HIx8wFsfCCz6NpOKUo\naI0xXTEvBFUp3vuU7uCVGc6XZJVDh5qzw5YYcVfaOpaDVv9274sYY5wkZ139\nZmlEyIWcyiTEMeB61LQmw95xvj422Jp9npW2Ng4AD6m9OSEu7ReEQAmmD7Sw\non+WNxaPh6ge0pVDFILYx7NKycvhksQBBcKPOWzq7VaXOs4wHJI38jmLsKTQ\neu+zYpuZVVMF4f061ooI0fKNwzGfT3dDTUeMcJySz195GojurMNuC4XFBb+Y\nOPc0xUwPxMJW0p205schKFSVDoyNK7QjN+o9Jqd1SVfR2pWAS70EBRUMpvdo\nrhzUY66PkrRAbhuthCFKrP2aa/Ubohgh0LQd5m/br/6eOwZlBsAdbRrGOslP\nXfEKANzalh76ArCZXsxqGAHzYP15cZO4dxXEepH2AkZW9pzL/T52l6QlU7EN\nqPKChBHuXrmPb8aeKFz9tBomQzRO0u6cS9s9jtezxKG7mowSRQbUclcOb7j4\nK3rtS2GIfXJDVvjGHkqu9FiYfg0z1o5L850p+596Lbmz43JQqvpfuXVcVsdJ\nkAbF0zhdxc2mOpS1T6E7J9ud88IlWY7SYGZ0xw92bbfQR3pP5EU/zXqE2eal\nRAhx\r\n=EfO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp0ibOzwoZ4/Yjeaksm2CKC3CAVt1YStm5p73+QJG37AIhAObrNVJ2clyizNV4/M9JxAtfKb3HJS6/GTX7TTVVeP+h"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.02ac1e6b.0_1617734176119_0.977344202789346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.5ac5856e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-circular-progress":"0.21.0-canary.5ac5856e.0","@material/theme":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+3GbrjtZThnUsmCWjZwH6omarNrs3LJrQPlff/nP5Ta2sGN9s/6Ahr+17K1vr04OWY1JVkGC18b8qkDZQTrzsQ==","shasum":"4205fc1d575ff2614247333f0f711a79625721aa","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.5ac5856e.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKueCRA9TVsSAnZWagAArJ8P/2uT1b9zDo1DDJ8YMhnk\nxWxiPCgCudl2PNwbDaG6ihU2x5il3hW7wg268IUmG1fBb6qSlXCDggtDzVys\nnWG2FISFv4Nyz8O8IK8aJVsewKGo5ssBitDDASTsqdjZgJBveM+glVgAQ1sf\n2WL0twW46CrdnlbLF11xWyd1wTuO0hrXRlVsLP0VSpyQnk6i0b4LEUSDDC+Z\nkwjyOEmxUiJxupghQQRtiyZtBP4fdPqg0jBlVWbk61ADbnL9BRtwMSFKFFkk\nfksmxT7gXbX/MM1ifZhiWFdRffQ53FFAI1TsQn9BfK5jJu4AcugrhRUrWHWU\nictddZDTmlpjJbGMGYDsTjkMU2TbDDC9LTb9Gtm7eaDxqP3i1W3MAtWuu25t\n6lv9ZYmgZG1bf0d5EPWUeGtNHoAkviHUKRi00uRbbK3IUPAB280WC7Kzi47+\ny16hHKB8v7+NLxzFO/kkoXkVpq2oD+qqcd6AKapWZk9+IjvwUEYkunDi5UlC\n+f3+XWvv6VQ0Ul0l5t3zGSrJeKAsCdzTCXZgAsOIe/z+N1f8inUfwmZfA+rN\nOrKTqCbS0A6JSBUmF4wUpfPAlssGnmQXYUnwPMb+Vpzc5ejH2+C4e37f0Fit\nIeFGNansoDiBNLOVXU4Kcm1p6uyKxYRw3oMqlTOwoT5Ac9bf6xsPktM1H1xv\nLxpS\r\n=jHe5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC36daat1bG3g5C4t4ddGig0BJf+Cyw/32g1b/dFyn8YAiEA9Yh2ikCRqHQylBYGdvk5atJ8tkbSajdcTc7knRtGNfU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.5ac5856e.0_1617734557497_0.019699216237870854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-circular-progress":"0.21.0-canary.bb23dbc4.0","@material/theme":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dEOk4QQtNkJk5ivl38q8mRQ2TB0ybSnK8k7JDL3KsnGjJ60kre+ar7/hgQ/Um8iiXrS1QPF6dM2NX0KNR/Humg==","shasum":"2b7bd1336ac3b9e448645366378d7a0a2f15bc40","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.bb23dbc4.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLlCRA9TVsSAnZWagAAaEcP/02XuWZ3CT9xhv63F6lE\nn8IMuR92cz7APTjYR+9Kj2xqoomqwf6q1XRaX3S2JkVWWNXSr6xd0+PlMEW2\neSAtZQytjnAT59iVAfqG+bhnKJHi4nlZH2WjlI/9akIxUzdPlIq8jnKGOndA\nQat1SBAF7iZiv5a+MwPIxiy/F3Pu41B8Lqctb58EBYUvj3JVhwwM2l7XRADv\nxhgL9/wOTtHsAsG1mejftKoph8rlB1TCuI+jNQzm7Y7Bqk+vGziunoZOWOyj\ngTTiMNPL12eeBu96p09y2EFOkCaorszgtfm8ABSgwYen8Q73R2OmaELFTZAR\nkonB38+GqPAuQAOTzWJHLijpFmxnzUJnz9ug64QSO/NJbvG7j9Jjbd8RqN9k\nHIdyMqRRPtSxU2XFbfRGdOThMeEt2AmNZs7/P/u8Y2IEBwkl+ZRduOmRcA+L\nlUfpV4nbzhpzMR07hp9Jl82BVqVPI5pLPqXRrRTyjKyEnHJTHFi1IaXX7bwZ\n58QmRmIJsgIIveFAVNOhkNsH3M2DBUr5V7RP5ZDo75dUXcCtWegkLgasCKEV\nyYykQ/+G4bfK5nCwfwbL1XnJ1m6nUmTeIm6XWEsc6w5KTWQctMI5fgLl3Jhq\n/MVsa1o79GgFEFtP08msbsIv1m70j5fFdeeJe7kcfm5kktm+qObzgyeoyGRd\n02hj\r\n=53gl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZqRCl+0beOXTIaX3Cpyvn+HOCzX8c//1VEKCxNK0VKQIgKt86KRAjJmYqWqOyBpm8zBLelUytEp2rRmL0Oyy9nN0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.bb23dbc4.0_1617830628586_0.9618600360845344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.e539904c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-circular-progress":"0.21.0-canary.e539904c.0","@material/theme":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nepp3CN6X5wR+5t0onqYiN3ANiGC+wKPn2Udl7H4huaP2s/nOjKJ4EoUwJlwqbgee4oeqmkMPEAr2Q8GGzfdkA==","shasum":"f1723b8d5863cc051c8664965316eb698d988114","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.e539904c.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UXCRA9TVsSAnZWagAAtSoP/0IyT+E3rKPUD9P4BqXZ\ndcF+opwezdJgG7V48LROjCYLCYrpMnNW60EEW+8sseN8Khncx9oRTlVh2Jj6\nxUZBSQOBBctEQsx+/VkG/PucXZznT9DI/AIHhyrkWGSk39vEnxsx/+/HwKtQ\nJQBFYuhIYmuOtHvyMptAQMfUTuQOqdmkoTeo3DVzyhk5ecpdgXy0lXyTX3TF\nDDSUUBzo7zJ5c6SUW9zr3iFTW8/KNip2mtISSzi3X/aAOXMbSPSt5SsvbzKQ\nxHNDzsXFhF8sqjHt89796Ao3RT/d4dE80JxBJBHqg1th779SoZXAgCMilWBK\nrrBjKxx3vW+rV+Sv1EJlK5ckjB/Yvj6+w1DyRwscP8+tfWAdGzrbq4v94um2\n60VsFmPYKsT7P3hDY6bwfd94JCDaUS3f2bOYXwiHPEN4fokJTUKLCJIoenO6\nAGYfVbmGYzy8wasxyrDoOsnu0LdBIl0rMBNK2qQH6AHTucWC9LKzHX20HpzG\nMC69lihkJIVONyLi2zSjad23w7em6OgVI7HbhDf1IcFcg0tD7UMf0vWSu6Ea\nBMgZbOo/T3dXKsU5h7Hlh+mkc8cl7cLoFJqXVQmJNoxEH3p/OYCZ2c7RaCpD\nApnM2nW/2oDAGWP+INqYbD4i34C1Fh6//51hUp3ECBCg6OQjxa5cbLgx3M7Y\n2Mi9\r\n=7b4H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoMZ00esBngsznAR1JSFqSA5pjNMQSBbUwefCXIUZoAAiEAlu0tZ/k6E0yTCrw7uI58CbaCEL0X70jx7BZ3FrTeBVE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.e539904c.0_1617904919218_0.8714948641500306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.a93ae333.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-circular-progress":"0.21.0-canary.a93ae333.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qNZtrxLlVlkaq0wpE9FgJeAqjaz9y+tCTWd6Lo0n+ixWN9Ehxq4sHq0kwd8RKP1IjqYR6xkPVzXccqTIY+kTng==","shasum":"9a362c40cc41c1174be934f007c8c14157d3d24f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.a93ae333.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTuCRA9TVsSAnZWagAAZz0P/1fz1K+D+QAmp87u2JWb\n4S9NAx5fWTkiEpFmU/vMIw0DkVH0GkGf5++HC3755xEcD0H7RjYxjVxx2LnX\nKRdydS4yTWeHR1TJBXIc9N3KwepVdCLiNLoBhC4HOD+qxgPQOZZf5Q4D9d1S\nrn71DB+AIf5F8wTZHCn7pWTIgXIbY2ilcsVBQjsdjj8PlUxiNmYcPkzsYLdj\nK2IZZXHcIezsGcoXJmI8g4JAC2Z/8XwJyA64S+xM/imjH6Kgq0s2HcLdgoTT\nWCL2v+ligCVlf5ujNmuZ6WwUG85oBxHqEez6Tw+xQmQ+IAJneZ+pwPaqlKSX\nPMqvMIwjdujFqkt4Axg78Es8Ym8UZdHqWeXBREZvxwu7LBgw+jY3/Iw1Gh99\njZme9WY2oJSIFg5Wl+I1vjVBP8TGQe/UdghYFulF+rasKQjBjxVj4Q7SjtwW\nn/FiK08qpaYdgx6xqX1J0G1KT1Zb3vXSuAHCdlcGB3TWd0OCdHLLcFkjOTHx\nXfZYnG0yylWbx7YZFEG1Nr218jbGuMykU4VddVa8t93A8Qe9xGtcw/FQqq1r\n4PT1RdFYZWRvMVIrYSbKybQjA3oR2vUeQRoZjCYpZ/7hN3jlki5ELMkMjRMP\nwbqey8NNh6FR8D5tG53rd2Mwj6mUypL/qZ8L51htM1WULrozUgBMFPm7bjwk\n0nTb\r\n=IUhL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq2tX1fmFcnDlLTW+UH1lmGyldRIawK57S/878yNyZWwIgJYT2dK5dQX6+uCczwLce+5A3/cHkfvL1iBipx3ixPNw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.a93ae333.0_1617999084326_0.7759151487765199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.e142c144.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-circular-progress":"0.21.0-canary.e142c144.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9MaJBzS4k81+WkJeyMVzrEOVMOFWWeBNyJd/Mkue9V+ByAlpYcSe/nG3r0rkAlE5BoWHZHIQK6hk75NzuBMyGw==","shasum":"757fedc30e4182bcf2a36d7c5e9ea05a6ce40d51","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.e142c144.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF44CRA9TVsSAnZWagAAF7gP/A14c8TIPc+KTtT8sL64\nZAeBUI6u941Ai6nr4wP+A8De3rpy9VumR5EoJB1r0pniy1TPRtMt4xBRzUZ4\nDhGw0C2BY1nDD3gDk0YYL1HezUw8fqKe7uaJUesp2GjHJ1bxqxoDjtoXqmqS\nesNoxsTTMxKzrHyrqpWy9lsixhfRHbVabGzHjw52p4EdpSoMbSzgbzkumbDK\nJGWKTTHuGninYFuHHGniSNvVOoDgwyG/+HB3wvshMQF9LpHpopakqWarMSTL\n2EvllZHlIYByHXcQ5Luvx5Om07yRur5CH48vWOJWinFy5J5t0a5y5W7Zj9va\nfUJfF4PZVgeuwZKkv787qZCsbcWr6ji2EHEDpqgy3OW4b0hEzrT3cospQnnx\nIgwXx9Tf9BlIFA1AhEqLG8qq2FlzRwFQN4Xe0BPKWT/55w2x6y3WKKN84hzi\nPeWKeN6pfnucLHpKel9Ulo1VO99C2AKy7KbXKQPCGfWxB0OVzDXpwIX6qBlD\nnxGIR4SmOMGdwJQ14V3B4KYt4F/RYTvoSZA/T7rQTDR2AjXg3O+KC2Eo8fIE\ns1P9IcOKk3fxJM/738T9loGULOPt3aMKQKXL7ocpw8jUq6x9G+fXCV/Hk5dJ\nnM2oqitZlU5HmB2MCwIubBHQPMWAcbyuFZdxJ7GTvHj75pYHXwgLvjoDzj5P\nCRXm\r\n=0oGG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkEsRstYyr7iO7DQto5WQaYjNoSASeaJ7ZjSgWgcuxRAIhAJf1guztrJwSzWoxWqCjn46v1PmVf/VIm3fJutkZAq8C"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.e142c144.0_1618239031620_0.8535637917726564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.382d7eb0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-circular-progress":"0.21.0-canary.382d7eb0.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y3QFyvXYFT5uDEkcZy6VY3HJWfZ+RNfw+W7X7VbFiAk2xfNKkvKRtzsi8mohhQJuZQcGSHDT7lhafTPeEAP6gw==","shasum":"55e9fad4f6ed821827f6b38dcc44d6ae43c6d745","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.382d7eb0.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQmCRA9TVsSAnZWagAA2YYP/3RqtnD0Q1OkyPvOjGNZ\n7QNscvhK8uhVc/bvp5a+TJhZSnOUrd9U8nVvE99NL/HBi/mzC+ULMQ5+Dudl\n71H67iBnOyljTsKOrKQD2/IVL/6KFUcm+i5Z55m7EkKmss9bPWxMw/+tSC30\nbkVYDnN0UmvzuI59bFmbJf3p+PArzfxK6M8M1YSsCPWDNYQm3sBggr3gmLZu\nVHV2ZoQS6mXVtEPyST/jo/+ps3T5/cNAgZ2id3PIubvi1CW5DWPJv2jOQuWj\nu3BqK7ADOlpQdAmlrWtCo9GrYIHTDq0RJ9zukWmy9E4Lq2OjhWocYff5QUmq\nOXeHKBgucwuejr0AIlfL+WZQ2Oy13t0P0SCP+peWl7uSU5CYlas9v2Wa3TZt\nMuE2bFnUOv66Ldjbg5woG9bFkuu0jhoiLv3keRhI1v6K4OEcSxOjonMw0oqm\nBq9b8OF/qGE3fod8YjtK/1VAxbkJypLb3pXO7h0UDvvTCddRyuTGCUeDhT58\nnTwkhYn54djE2O4ikzC90QFby/3eSdm2vs+7ObpQbmc9KWKSjij5GIHhWfGr\nyOjAzwxfNryqepeomDRiT41eT/BVHq81ooJirpETmVgGw3sCmWBLiyDVc9K3\n/jXl9V+6ishUBw9P2di1rbPSVG8ELuxMRtnxCU0e80kld3MUOJ6JjczvL1qn\nVWyW\r\n=ZUvm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTnv0ESUy14/Bpq84jWUxATR5L76kgdMnB4QzaLuCccQIhANHT4r2/SaXoyhYuH8T4BlD2jRiqqXVPUZkruz8jipnk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.382d7eb0.0_1618265126405_0.7213972703196063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.b16c7885.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-circular-progress":"0.21.0-canary.b16c7885.0","@material/theme":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5yx1HoeXN5DJvwLr3ebqdyo09SVfZJcRMd1PeVcQaefuJ68kx78R5+fHtu1eP28WqFa09hgRFNGWYAC4oyVByQ==","shasum":"81cfd9d49de05ee3769f2b29a5166b9f7a8b2de2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.b16c7885.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwMCRA9TVsSAnZWagAAR9UQAITDfSVsTmiVIpYQjIRs\nsm3tOOm99zbGuCpsINsnfXvOUG0rWevhQB/SZQNmboDXSj782QPdfwNDbOr6\nFwmygxv0lLfJk/u39SPvuqfQo8a06eWN2f+bbcWo1laXkKg0u2+9dKWEvTVG\nrKtaHkXlGQTnFev2n1vqYYdxt4+eMJtGkMK7kHSP6lCLe7tG1/SiOyRWskgD\nDJDy+MCH6bE4xZbPfwL91wSnW1Wbt6y3W5MdP0Edcd+WJKDyIBCPM7G0f7RV\niVVkWn6VktHWu6L+aU15ocd0Jm62P0jcubzaJ1Oaq6TwZdyx+xOTeYBisqmm\nwcOHW6nWEWuIinq7edwK5yqoDTomcQycmyGuw935KvcAdtRxLZC/8xmQE4EA\ngvzH2SrO6rkAMyO10mKOaOk4/jNw2RbqnWg+1/f4X/wdxDy5WZu4R/B7etz2\ncme+xJEpJI5UHep9rmTu4dyLY3dA7AhDeT4QrU1nfKrudDZNgyeUUnD1C47c\nwxYsPT2RhNnazuoOJqD16XyM20pPJwGqoFpBU39oXKtuiphvj7aZ+yagNaP9\nUjeXJd6iF30cVj25h3tGmg+oC8fftw3p3sGIMLpIhkm5dLIRzdLAwGk3a51M\npFYMXRfo8bmth5AEvj6zwG43IgDjqAWishFOEzuFL2BkUWFBSBgMx9Vl61BD\neO/7\r\n=u81q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAp9p5voGsPzBt+qxCa52w2ZHTzb7st+q77ZVSPvw3PoAiEAjb0jlAQ8fkEUrNd8u1BkWmnTwnInQyfgUt4D/+rB71o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.b16c7885.0_1618267148363_0.17147744098040052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0e92782b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-circular-progress":"0.21.0-canary.0e92782b.0","@material/theme":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xw6cqbh1B7906X762HcuPOOiZyJkS/eR5X2qTru0FBeioXLS67F/OmK7W+msPEGdBlH9vk15lK588+iloPnQaw==","shasum":"69abd84ceb7d6c9b27dbb3291585398c1bb8e9ff","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0e92782b.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2oCRA9TVsSAnZWagAAWKcP/0rnRb+UqxFbZaba6WtP\n5qOcuAeJgk4e98Jw44slM3PVJycpaP+hGkGsYUrqMJlHCUQH9PhPCDdcXa7H\nBU6S6/CNi1vRi2dhRvnBvnYYX/NXUN9sZmtAkd5fMbxOBmiAdwdfguwgfrOr\nJw65GPMakg/YEIhWy7VLccFdU6Ck5oovQPL+y/dmhjcZqkjn70gpmoHRW49X\nTVBaIwra9dfNZjJy4Bd/MUPmo/ymACdDQTXzILnn4E7CTikoik8hJQqhyoxo\nxojRDfAXB7XoYh0vppjAxNgTJsl/cb0xamGbMdxw2ZDpHAu9NEjN+i1hFXEC\nRHtc8r7KQ2m1ja1e+TKzJzwgQFQr72mhnwGkmHOjOHsvxui+ZW9geZFQtSMB\nh1qVYtILdDjg9pmKUZP4GQ+/ZRxtxd16qrDDl1wBFSxCkDffk5FdwsTLSIOK\nyT9A9EWoPwNk4DPw2pPYtfLkNeTGEz3fE9VmUKCnrZ5jbu/9x3O2qYjzgNPc\nC5h3pLYrJb7jBU8vQmZyhQL/g+h6pye62YwaubRGKId+JQipAMF3u/JAm1Id\ntt7ZpzORtWc+Hd5zI4ganya/97iLVdpZ9HqFxJbhFPiE91rkjsOD3IwtqOfK\nw96hxzZuNYPpTDuQ5fu74Ap/hHsKW1t9LdRMyG5YOmuYBNtEqg30KHyYqPtd\n9qql\r\n=NzWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJdFo2a6+dPDptdzX7GvT08B8MHP3qN9/llvaFllEGwAiEAymZnMwPNEEQrHomgXUbLm9ibdt6qUlOjKQZJHg8AJZ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0e92782b.0_1618324904469_0.12306642223317255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.70b3a072.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-circular-progress":"0.21.0-canary.70b3a072.0","@material/theme":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-d4Xzb4mVsZeDZpYNdRUcUnj6cRGMqs180VX7hjaVgAWA8pUyZ/YQbL23VLreA18dpH2QbAUuUzaADv2+D13kJg==","shasum":"507cc89c1f33f7456d637413b5f4ce7f1b8a3033","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.70b3a072.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wGCRA9TVsSAnZWagAAgAcQAJraD/0KrEiMFk57QDUv\nR9sZFfuAYN91m2hQEtpMw7agb5dizq5QfOTCDH5qzy1gDKu/xWKZWGsVbK3b\nikiG6O5el0EaZ7LrT0yIUMnVpyN/SP8JMJwm3ZWA5HV3VKLw1IQdPFNtOumw\n3FSqpYFcgC9XJxkjrjk66t5v3jahSiD5/xYTKtv6pxALuaJUUOVJE1Fyi6C8\nsu4a2bU5DaCWMewpdfijBmtiNKSk85YSMxHuIJ8H4s0Qh2mhH5U2RL65R5pV\nE9Rd865Y5gw3DBqjpdLG74sLGQhQFH0gO+i4dY7sj5uA6Q/ul4E15kmIFacU\nU+3jbsVxBVpS7Q2gsNi/qAl/+/MFoIN4YaXGbr3STC7RZr3Xsayq1lBRwcIp\n55oIQrHdUdLzoqK09WxF69pgU+x56kmqqezT69ICe11Qqf3zhp1bKWhQdb2a\n2v4W2uYs72MAViZ+wR0ynqaphbRESgNWQWGFe7RdmWWmIStseDDfgwJe1UgM\n0uhNqGWkk12fMJSZZUNkw24lkoXkr3l28Wz90M1OwI/6U1FpU7XV4Fqklx45\nFuk7tAEo4/tcjM77vzFbpFmZ2b4SiwfoCiYHZ1lB24t/3Qi+3H0U70tZJcA7\nxndvOH9PJnnAkFnZtCM1DTD3pMFDEhB5Pt5/E19duqJpsUB8iGQDZ9vXpLh2\nHuVJ\r\n=SLHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU5wsuhq09Uzb4NBdtrdntwCsr1Yrr62I03aWhiOJYQAIgXeRHD6+44cHddhYsKFZUQ87rof6jFfxlTD6ibXTXSO8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.70b3a072.0_1618439173965_0.09347961693169982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.ff79b092.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-circular-progress":"0.21.0-canary.ff79b092.0","@material/theme":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DhQQ8ks97V84qxtzDCprbj5v9Q4qnOydtBqhKThE7mNlyXI2eYQp4DK5+Lpx6gBKdYZbyIeL8kaRmxuyE5O/cQ==","shasum":"9319dfbcf41ccf010ca6cc5d342ec6718cc5a386","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.ff79b092.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0kCRA9TVsSAnZWagAA5R0P/3lyeF+Hdn0/YlLrDEfr\nN8Ifa7lRALHYaWkIvYnO00uPeLnAkeA2Hf7lnGST6U20uMBgaqM2yqeyENb0\n4iwyOd5tVzsC6McfJALMojhKJFFwTgrP1CdrSNmlSlHp7V/TCwdDnpaW/DiZ\ntwrY0zbGH9B81FvGm61etr97qXZleDEwj3MxOF6rjqGNjQwJA6Pgs1Sty6b6\nlnh5qe5arE6rU3V6Sy/kHhQaEmctP+fjctUTsGLypAyzJHSpXz57UBGcO+yE\nU16L+xPR9yTJjDwbHAsi2xNfBmMqHOPNue7Xo9/O9TkW2/P4F+IAmyEKaLUz\nORDDW3LAttjBB7dRojCeMp+4rSP1UEbA2v8U9RFIWupxPHz1mWX1B2Q5ZTY9\n2Haf3xPHOXFNKQwFB1J22foPzacjy91+sAoE7/q2ZCpoNg08X5hC/7s4A/4s\nUPUd3GQN8VYvUMd+phTV7V+8VASZTdhM+zM53PuGzwfrSl3Y5rzRGoG6qguX\nl7DgAEGwNOT78alopECmVoH3aZdrv+6v/aHoIvhjigfUezhAWfVAncPcVZel\nxJIw6/4f6G1CVzqy+e5UlShPi5rIk72OfC445k4hoWT6IrieZxeQxWZHflbC\nvwL1NROcMdTx+Ma+CmOd7KQZ8rJ+eYJu7xmCtQIvGPzlZCW5Kkqn46SYXAbt\nTq5k\r\n=X7aP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEx1A1uRw6xUej3Kne/UsYGa9Li1ItyePCy1pi/Mefw0AiEAsX3qIXJ+fiSayGNtl+H4EX0QgTwduOucXrXDWRkf+9Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.ff79b092.0_1618513187925_0.6038564292852964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-circular-progress":"0.21.0-canary.f35b2fd7.0","@material/theme":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3NSYnjG5bLlmjoHDBaiENKyRiTALSvvc9NsO1Ih1dkdaswt/b345jC/3iZnxlXkjv4cvViDDFq/zxlPQWbwS6g==","shasum":"a6917e1cb05fa8dd345a2d8b61e744f7b5f7c3c6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.f35b2fd7.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+aCRA9TVsSAnZWagAAPIYP/jT1t6/PP4/+dgp85FXS\nQBYcThEzCKzPtFYoze3jdGoGH62WgNtgE/2iydH7YhwaljHzIs1SygxVcWdv\n94VKJym7Pt+5wtazzMGUgqMY6kcBedSRmtFT5UNEcdoQCUMbk26hT6R+AFRm\ne5s3CjhdGI5A/kNe0xpAj8ojo9qwqCoo0zZ5HgxFdN9BmA4/dUILWXF3FKDa\nOUSi8Twi56GQZAlrHycG9I63OMWYNcIar17ETqsjmDMDHPi8/7BX2eUeMs9w\nq8NnRLkne6GGLetpAITqYtXn16h1rH8GvwLyMx5fVfgVRfBKX/J7DtBmLbVo\nTwwq/1+bdEBlyT9n/m4sK9R0BDELNgVmynPTKuXNtwRdP3v473SiYvGhfVyK\ni5e942sOmjxERZoyzoqGmQukMyiAWeFidlCKcFjQ9iH2idfwA11qJ/wjHn17\nUM6dYeCLheAKVRPNECyfiEcfUqTimEACShzLpBsuD3BJf5luE4MYBZV+Bao3\nuas/6uw/AB691dQbLpwK3EUaF2KaCXtvtRlpKiGWM+NzIB/CALRmuxsBm4X7\ngluNWpDADmzGQzKZgjw1xIfFKRiwNWmXuPiYCNN9UVp5RkPsE3k7uePzyfG2\nYsngd8Qe5AQ1R69Wxa9mAeZWYTpZstYf4fh8yVHAvqPkpr0wxXVwPKsfJcOV\noojG\r\n=1dOS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAx/cgKYhZtZ/+JqsHIcDf2KsLL18MpiUoceRnWZh8QOAiBnPduIcjtB7gnKDoS/sHmxCZ+KXqLzK9UCeZkvpmqCmg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.f35b2fd7.0_1618513818183_0.5078370603630173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.11977cac.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-circular-progress":"0.21.0-canary.11977cac.0","@material/theme":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nzIaMU53laGjEKOWsckogc0w46EKRQN39hLcZ9YmJukVMDX9kOKaa3ZoysHAIXVDm5hXyGlgeRuuzB5qV0np0w==","shasum":"74099e613681a3b9aa14ea66d9bd0c252bb4a167","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.11977cac.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEXCRA9TVsSAnZWagAAqDcP/j9w5clQz9PM4U1V6CCX\nE3q2Lvrh6xd/4FVmqmP5ZMSsEghfhv0R1bO88x8nFiZaUzzWvz0Iyz4kqcSC\nOuENJlka1EJCDYao4ShBlr5PCYtHeRGxIwfXxH8ke4uv96G77xa+VFSjx1JD\nvaISJH4HZMxgLsK7zZiIc9t+d2HyDHH/lJq7LRhcM/gao9tI7ERjlDdIFXVd\nFru+jyNK3a0xarL1UKoBLQMdL5H6f0NCYZK7zqXV5BOi9vfKw3RoORFAAvOi\nFSc6nyh5pj0iknBgL4OYfsLkDEhU9otjC+u9FSCVGPES8u+ig5LXe4J5shx1\nNhQGNl2DjDNWe4jaHkL5wdpBsWbVNi9ShW7KaHx9jIG/rIbWcjeasTpxrm7g\nBuqt/T41oSOifnHO4lmE5Wy2SjVowVCNAOrRD1IbQ4o38t+ngJD7J7UZoP5e\nLKEX9FEHJ4b9nkpasHOqJCm7VCa5Uxc2yTyvhinpYAAZXTCGsPGNORXm/s7O\njNXgkEg3iukgTLsI7k4LlzDbwhBu1uF1wAfRSl+Q+v1QK3ynTqvwx51qQGAZ\nE39OUiiae3BhTQikZ7zQlVN34nuh6pytQYmIumrXqN7w4CvXQkO25lH3qOFV\nHIOFu8075aRaEtPBIEt7wH32HlxGnGfcjDzFxAfr94R1M9e3A2tSyUOAlO7h\n4YMj\r\n=DP8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVk+PvhApCiwxdi19t0WNELsmjDTuUl1RvGPIzGJ4rtAiB+mVr5iCRsZD8y0xu+cK3Ykh8Mo9/Mxia3x24gkc88kA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.11977cac.0_1618534678575_0.8855995592994521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.018ff45e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-circular-progress":"0.21.0-canary.018ff45e.0","@material/theme":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CQ4K9EN2s5vupnXSI6V5apX1CWZ+lXeA346S95g+yIMwkYhxzsY3RTJe5soFiR9b9OSA4bW+cviIHmlWD6cUxw==","shasum":"f155272d5a8c70fa23f9bf367bc04658c60d2272","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.018ff45e.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3QCRA9TVsSAnZWagAAbGcP/2e3guni/0PgH3BZ3zqs\nTbHzw+/1Dlydr5cMcyQPjcXo+aM1yZRnNuA/N3J5EQoPU8RXIErG27SLzmAu\noB6PICEm9eaQwTOnoEyuMzY3mTdNg5CcPgVOBZSoU0mOYcKaBjBmXBvFIfbz\ngJwNXZUiZEzbxDZB/E6nT/au0gLEFpKhweWjgYhBdf2QaUEV0wvGm0T/sSa0\nUPtRQNbn5PBW/g+dyDpXuSFnFIcTQmSsDe286jiJsCbevj36jLFPvT34chPp\nCQW3fiKTDg0vlthzg8mKXvacln3jFsbQJz+qYNJ6JKYeUNHPqbPr6bWU7UOR\n7IbDOg1ia5zjk6hwtyrk1rhzWVJpCr3ECTf7dGT6iQfB8ZP/plccEha18uFz\ndwdEZbt1N2mxwimG2qd6CSKOD0Fps+sTkGnY4DncSHef5Xc28kSTdV3xBoCv\nxhSdKqjQZzWcmw/LG/BK98TkV2wK8Cl68PcYjaW/vAiXgGOO2ZYECKX8mDEl\nEEfDFsCqf947szG2YBUYCCRMlUToISgR2Mgj8ifS3yT1lKifv99Qb54MAhun\nyKBuWVbcXTiZenn6j0cWvFlgc+QnePt/9e3jnaOdnv/10HJq4x9YW4qWgmQ7\nNLh4o7ns8YEADFIex0FeeaS2zB1A3Wq/ZVWecXGFOdSDBbFvDqXvaoXFv8YX\nhSW6\r\n=nkTt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDTqjLT8Q5yzopDIL3/jbG8tjxUxCaxDN3gu/sBu5daAiEAlMyTG93yc4a73nwHFejltCLkY8yOzuTKP/JqN4gLWNs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.018ff45e.0_1619131855546_0.0627699088941922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-circular-progress":"0.21.0-canary.c99d1fa5.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZuUjfkv7I5MLliFFca4ONWHJnD/yEdI0H/QcVomhZWMlgMzcmX32JfvyYz812+B6PH1RqvWbwsdhH5u1vjXgfw==","shasum":"7fde9a4a2f968ab5ace401729842bd726cf80b23","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.c99d1fa5.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiWCRA9TVsSAnZWagAAdrIQAJdoVQhNpIO0d5z7aL8H\nd9yOCYQmPgG4N8psVM/ZtSaIielEkEmabBmBGL0ddFITL5cSkBCI3Nirf8A3\nWphW1osinqCNKE0Qvts+u0M0WeCHkiR5fK82L18NrhCs2Y7ibwfGZDRZbkjf\n7hMVfgtgs1P18FS5gFXp9ItP+BaoUY+dMoljtEw53W9Hebgd6f0YtPL4FSly\nd55waxA6neN5Q9YvVpqOLJYZDa/kVF6aj3oFgloWd2lWwFrbTOjea4YqodLU\n5cY1yk2Yk+CuSmMMLDy9ettbvij3wURGofUsVwRuAXdqllV/tWuwnQOdT7TM\nxAmh6vogPWaw/wh2E+uK7B6INlvVKmpJtWM/ZgpIK0op8vJ7ILQAFy10+RH+\noNvxryrkZ9QKr9+3nCzcGBOVfrS7llvJrpnfVAwA18wuqqOxsr+ZR/1F7Q8x\nKNsKHRstIebwnNwx1N4wAMxlMkF7i7j3FtF7FExkWmewnkiTVYElIz77jYYe\nHjlCzY1BzvwnKnp37hea7HrPYfiVhKPuHP3aXUsKmq/P086axxpJn44m6j1z\n8UunQMIaAKTPj5I8HpMDNPw+piPojqg69DusxMuOFhlpq3pWh1CPpmb4Erhv\nYyNXz6yWItSsa76g/bPAdhkNwaZJxKHhk3D8TXjGxF2tMQPz3b9LG6wyvJF+\n6aM2\r\n=/xHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9nleEXG72xFtBA54VcpExhRi0Ab9pMSGnJDPcNPYyUAiBHx2/cjnaRpabGcG+H37/AjFkYmJyxgJ94yZlDcid4Qw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.c99d1fa5.0_1619466390201_0.29519099712176855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.eea9b304.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-circular-progress":"0.21.0-canary.eea9b304.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q7b02IPsnJHRtAHZRxBAeXtxbQhm5HXb9mK+WGtjwZFAawC44z3cqS6K7ue3QTRBmNCFhp5nFM3BnIuUKG3lKA==","shasum":"a34ddb5df33d6b527ddf0b4fd5ca2fd6ab5d7689","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.eea9b304.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXRCRA9TVsSAnZWagAAaCAP/R7uJjnCRuyBMq5RxBiv\nZHJsOaZVnN7SPpRYCWgxqlB+NR5Ps0ql8Qku5Cmf7PvzrGFI/2N2mpSM6gUf\n9H2wZFT/CcRpw+MqJJLkulHO7hfToe9YyBKOPQsOq7yZrH7PxrWy+JTZKTml\n1+8o0riPinE82AOTrRHmU1vOlqri424HuKeFkUA2GCAYPbtDxrSWO1Z6ML2H\nNOwtlPEW6mReHLs4HXKgCWD3zjtrkvpifYl7juRT7rl6JF2ehP8KFq4JjRYk\nnqnGZ2E2UzcqvJvVwnG16Y+bsrkz29/xghB3GUQc+BbkZNYyY0wywH3yUR9V\nhVyptNYEhHJpCl1E+uQOb4cm6/JQQCWcJc4wKAlgvPScXJOFcHq1v7wHwJsK\n0QXYfc1HkBTOYfc1iXq2jA4PshqYnBp5zZNgtbgebaA/vz0UhLdqAOUBQrER\nVSnKng7Ennm5B9LPr1dHlkFZc0xg2vwNxsqwG+1UQ6mZcdoQGs/DxyrsTIyz\ng7UwO7MlM9mdGfp65MvhE9up7vwHLSNM3qnoVIu7c99BuUh5BBdgSER3f1/U\nRFu78vw1PeafkoSq2ZLKKT4+Ea0WEP+Ro67TykeplzxX38mpaTH+hiBYj8Uz\nDD09viqJ4UajWUmaTjIj5D4wa47lrdys0VNB2q+Kt5s3TbSOC+kQh5Y3oWaF\nawLW\r\n=svWh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLCgxavuKjXWO55gC3De8sgEZ9+XV7Go6ipR+BiKzIfAiEAhzsmAPmT3qwhp+3ZBr8zBOREZKzCB2MOBt7ZnjkqFWQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.eea9b304.0_1619563984696_0.8413766882874676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-circular-progress":"0.21.0-canary.5dd85d0c.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GbhP5UCCby88C6mkxL0uFygqNpSuaagt/iX4QClGdXOFx+BDoLusw7Iqh5koYS0utfgCvC2BaT/9RfqO/Uuh0Q==","shasum":"a419352401bd7db22477bae256f3797ca5319ccc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.5dd85d0c.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKe1CRA9TVsSAnZWagAAD9AQAJFuIztpsLU93Ceul+UR\nxRbfnFGxkYD4kIBT5CkepyuPisUZOGfKexRrs3JLwwAyY7l9Ww11kYnx1Lox\ntf0votKNU5HzTf0FwF4g9vahjtgEZB6ndo/KhkBXvLrdSgepaeuJ4Stm56D4\nTpwlL8zy6z0Szm4VIMVhxl1XTJq7EG6aoCcuc+O/zRNIq+heg0Ttrt6qPPvx\nxrkz09UaAewmiDLYqvbcfdvt9R8EPnU5WZ1WEma5Ya92bDa3GcUGY42R+III\nnZAriwUBoIyA7sIM2ex3ngnHV0QPqZU6GIUzXK7sSz9u1FZA+NtB5iHDxjzM\nwNDbTOGv1PLqlhfgp9TwxGTraoOcbNyMp7jdxhNodmDTw4Jx8UKvaRmX0T9F\n6U/Wn1vkzk0E+RIPuHK68nt7WmhIonWdA0kv7/CPf74N0ZixQd2dEJuRAijk\nCg/LG2ew8jpXsthRR1ppc2lZtzisLs5Fu8W9/Y17eGcYwgPh63OQXRY5C36F\nZmvNNT058g8GFdoOy6kBRRCCdQaNxag9ZYa5/3NFbvtE/XJqE605UppPpIxf\ncFJbH38QDamjo/++F6yivSikURWdNNDKbJt0acE+QO9JgjWwh9QTtSfizPWn\nmFsZq3q7QW/jiYLs5PKZoS7qzV1e949eWpU7NObRQ0VKfRFgJ3pW1YoTXhqZ\nEi+J\r\n=hjw4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyAUBa1oSVOlhiX//gwDG1j7OzwyDBJGDZtSUJqwFMtwIgIVycbimbujG1Je00AGfzdEBQR4WKHnJDxKh80/HEPYU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.5dd85d0c.0_1619568565108_0.6990284940774081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.cc813cff.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-circular-progress":"0.21.0-canary.cc813cff.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4l1mmgGfbSd4ZT1h5cnTORTezZM3OvE1OpeXoAhbG2mlnHyynRMyPkpoFo1mTE9IVyUqrDpHpgPg75LJ7P9E2g==","shasum":"a2237bbbdf87856a76ef9dcba56924ce56e01044","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.cc813cff.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRSCRA9TVsSAnZWagAAsGcQAJJVOZnVE4MW0cGMG8IK\nFbMYg5e/NDEhyChgJRAsaltbzaK9Bh3qCrNl5bAVMqh2UEyVzz24BxwWMiol\n+T87j5ZvgCAHIYjRhO9w8AbkBrmHK5BgIHJ0JWdmvNw8md6znsdxrCslKX28\nayLyrDLxjim8xvLQ/ZTamNG7kDSNk0Tofhdgt77Kn/DMbN4LjbegwGtfq5AJ\nZ5aeHkNtOHt1OU0Cq6NRl5PvfU39adjL3khshUTc6zbWVq6lUsXQSvidzS1E\naUl8RYbAuAiQUnuEz/JmHhJx/dGifjNLZj9QxGDBVj6u7pwzCHkO1E6izJMe\nRnaFsuLrumFY//UmJt5jKyWoBG8s3HSGepZ2ib94teYz3k1r7BYOS0Gl4YMQ\ng4tiWpy76DpFj/3wmCtnXPm0uVlMsi0amJEYkPRNAUPwYv3vWJ443IKpHLp+\nPK7dXwKkVkNMplLScXRRwWz4joUcYRbKGISmoPdUn3tzXQPWM0lFeWMVxAHW\nRnvQ1Bz1P7sN1KfG8D5peb7iTdJzWfb6FLgkS6e7Ga8PzIbf28Lct/Zlxc0r\nPQvE12to58EyLhcRzx05shArtDLKst0QbxtmosbnocEw1Tn0s8iM2bQmP5Wt\nD9CgPBGtNZvoxbpGOWdETxPYLHCD4/J9fFi/51uEbmvq1r+ABycohD053N2i\nZXuk\r\n=m+I/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnCstdn5Vv1axIgSz6EukRP+W7SOqqcGQY4vr6zvEiBAiBNcJnveVdNX8zTbPedng3uvdsbnxFBdIQahx8KVLhzsg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.cc813cff.0_1619817554276_0.8599997099630488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0-canary.0875e898.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-circular-progress":"0.21.0-canary.0875e898.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l7LuWZNmgh/T1KBKp+isfBb2EFlCuQAK8GGnd5bxFK4dF0UyWSFWyHUW1rw+M/RPasjvRGFfkId/ieYSRl3a3A==","shasum":"bd804c83beee3ec07a3bb494130a10f17b93895d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0-canary.0875e898.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHY8CRA9TVsSAnZWagAAOv4QAJ/RdiLCRrW5SHx/yr+R\nzc9Cvj9CjezbSBWj77uSgGX0FHLIdbsEYrhjKOoyCYZkwwlHDvaGvwAI2sjk\nTcyvLIXDDEdnxBqqGTjbQ/uCfgOmXdM0FP5LRRXjsdTxfe9KCU362uyPzfLZ\nGJK/x4JUTRupkrmxG01Cf4lswpSWwltwUr8n5tQ/zR9xpz113mqi0UbE9Ev1\n7qzgDX/mgsRkzLNxGSIieZGDGZUyhcZUYCGKKj1JBV7WCwsyX54me3GW3L2D\nLvg+ziSDlg0WON4gitEHRRnCUEcBskOLEcskyx7EjupNNL7SFJux4iHFlgxK\nADUnoBJ4lmH9PwW3eh6qtCwG4tQ10Mk7lOWhzP6Hh4a/u9BQp1R/yEUZPvm8\n0vFrm12ET9wdjgd0/zHN8+VYSGaG9an9GwSZVTKoZ8xwdy5uj+oTA8JLUQOj\nYuX57+2jrpDzqVR06WZWPgqQt6eV3E6OaEf5nwul0SN0JC46V1Esk+IzQHFh\nhqlNSgaOqZnS5OzKIFn0Dqu+pV/lZg7qu3UZ559qsz8yGGC5bvkldq/DDASu\nRTrlHTQNhV6U08qwsqj9hrXOXLrjV89VVLWzfM1P3gKd4b4USEG9E9CwtdhY\nqTCrtwbGqEF3QLJFSA122JFyA0CRc5A6LrN9CaYanTGXJMyLZ7CLdJ+otfzY\nTsE/\r\n=/glW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFI4GAsPS+p8D+3sTjgGuZSfUECETBgS3tkTHkK/QMVWAiBNGWq5b5VX9qH9jJNqK0OxEsoimARaPVpAPBTaDg4f9w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0-canary.0875e898.0_1619818044130_0.597937589242957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.21.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/mwc-circular-progress":"^0.21.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-gjs0mypv4HpABLjpg0RbYmTtxlV3pdtANbaBjk5l5HZGQugoFXXpoPjaGRPtOwQqMAyUVYrWIOGWFkl5D1YXkw==","shasum":"cfee376f5e30a50fa9438c5e6932a7e5c9ed30cb","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.21.0.tgz","fileCount":16,"unpackedSize":42975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmQCRA9TVsSAnZWagAAYIAP/AxNFHDQQGpqtBTJDn/8\n+SXemiXM41FM6nz2w1yxWzkN3+h1XzZGSDBsm/hZ3J2pFBMoKzZ3mI8DJeOS\nFYfl+2H6qapZUzFzufChTNnbPBtsQyx/0zrIYIU48jCHixFo9PccklcH4ENv\n48kzOVyA+YzkMLI9FXoQRdsj/5u3lmflifVpK9OZVV/QF63oTcYVfyC6p4jD\nwoR64H5J4GaPow+IC4inL5p3SFh717WZslCMaU1prZhtmYEFqJf/XRdKeQt4\nswVlJjPy0eDaNFzr5A+FNk52/RqwbQDzbbqBKKu7a/wMAIJya4Qjby8LVxuq\nYi/Omqq0K7FQIGHrCr7qcBNZXlQ1vD5Ttnhj75u8CWFx7YigOGrjA4jKIYP0\nV+2KMM2+VRZx7/7MXt/Drl4cO7EW9zg6iac4V9zCtKK4JLPQdks1raDoUliZ\nKYZJCXRPAirsnHC8FSUB25529rgBtO4w1I8owbgwOBFSAyVidWt49IIO6WPU\n/VcW124QiIWvejL7/TBKgG9wPxqkvVkr8bb7LCEBm9+2VKmiRysmFYBEOkgN\nYfplUfoxiylL/qgRbEoSPtdeo6xGGW8/W8N/+ChHujWL4qrh9Jy8S1La++yO\nRGG30xakRt459iQZIZbjrCLaIahD6lXwi50vUvzvOeV0WYNkQv6H7SVrsvO4\nrr/9\r\n=GoRm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkrzoamMzY1cu1NT0PP6rZ/XxQwaD9P6A59m+ZsFR5AAIhAIrWl5QS1zajBTk/eLUWMr814PIy/JK71oL5Jn/kh/8M"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.21.0_1619827088191_0.4733737025004212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-circular-progress":"0.22.0-canary.8f1e7e1b.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-445nMFzeUMQ8s03Onl5Mhz5r+SqsdjmifAbjTz2V5oHXyPuqUwl4g0llFnvus9IyP3uGqqFFxhacgJ5K68SRXg==","shasum":"5bee93c72668c4fd6f8c726c1012cd40658728da","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJs4CRA9TVsSAnZWagAAyxMQAJ6lwTH4p7SVKb0DJyMB\nt6y2O4DeAC3ZvQJ+UD7bv6IRgGOZ6o4kNWAWtaXe+SxGFqlZ/PAb7wSz7fEg\nHVaE/IoSpsn9Qwv9avXm8lvSQ6H5osg/nj1+WvxoYEyiTb3vPbmf/6hH7BrE\nZho7LV/tfw9zfHTo9Ebg7dJ2xrZuJ1tEnUQo1XyHACaALwrH0bOW4x8B9Md4\nK0UCo+D824+sHO7Jc2u0hCCeb5rqlTfI6iETV10viikw4zuQyUnP+ARF18+B\nYB3/bKafS4iQ1J15rrhWl7XcaHA+TbITLRXq7oG4hRKGjeFdTUhzwrXljJXG\n5fAGPvmlj/JY/y9r5dW+FFuKBu60Hv2c/Iimyp1fFH2CLPDtW0otRvfUZ/Vd\n7DNllhY2HA/109ta8YxFrWrn2u7MVzoULG2xWsjC2+pOOUhSmVddZkeUgfDd\nchtNNjD01ohsgGiv1g0wdTgQvk1P/8V2pBuQMo637F21LcPEHbmvu1FI6WvQ\neDjAf/JVrlnV2LDel6kqcDA4S5E5lC5N0l7XYUmDNaBS8V9NvNlHr4+E9Yv9\nDTl3sAccOYVC+cnyqAzrDaqIhiL5M91bzBuEi9GUy6uSKfPQhZx8jUA1PPqp\n2l+GYgrPwhHX9u8jSl8vNDr73o4+4fh2muoFAbk3iZaoSLFHZKlpxjHT0WTN\nv6Cl\r\n=PGdw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPZ4DmCygau9LIJaAo9ht6PFnCmLBHUGtE9cci8NvUMAIhAMrOVihPNBpF/fZczZLzSD7GUSonRG/QtNHctWy8QeMa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.8f1e7e1b.0_1619827511906_0.03789511391087097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.deb0e792.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-circular-progress":"0.22.0-canary.deb0e792.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oyj9d7GpWzsn+b5VIEwyA2jCiQleFuE4PpvLxIGRbjh0AJlkhMfH3J2tIvhXs2o44h4UH/wrmivgHvkv2XZ9+A==","shasum":"e71e4212b7207ae65ef5be2f70b8e29d2bbfff93","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.deb0e792.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxPCRA9TVsSAnZWagAATp4P/jlZybHXJgI4mX5QayL2\nEvrQ8eKmlMxYLiT21HIZreg5I8u24Y6SiJ+6LzW5dvYNK9jxqpzWAjYh6ENm\njf97DJdVJC/J8iyL1Pq4uex8RaL9tf5wiWgUSNxv77KdEv9L6km66YAH126/\nLJPbWablCu3FMv20lO572VLCoZH/d3k33/wA9NU72NWUF2q6AT7vyHHjrLZa\nQXd3jG81tm8qwB+QS56sBSnS31+LLOQEJh6Z+u6PQgE24uDoB6zrZmhf7ceO\nbQJdAd8WIAilVb4zLFzRd1yeSv14Too02BHIklmbMsi7wlIlA8ERuUSNRX1I\nJBRyZjaagfKZqCg0JrJIqCx8S6iOV9fl3ZPGB1fZ1qeSUaYPhnpAIpECI6uS\nRTL7+8sytWXhmIRZDxH62shj/p+KEYJCi0DM06wDrwcvWk0JyX+f5F9zDPPz\nFrdn6/PmFAJKCoIBZe7FCJDrxq/F4phrf+hDqo9PqvUmRUpwO0qPPU2Wyy6H\nx0MI5TCRCLD4fcja9fUlAqbma5PU3EZ1PZgItzcjk3Dcit37kxLYygPPoO79\nGfJVtZswaSMFX8PWoEzh5yPfkGdm1W1tB5egQ0o3UMi+bXpUMoboStWB4VkQ\n/rK5yaYvrGVuTF/RLHHN3Uro23KoTis9i9nc3OHXUrx91EOczeuPWNQur9sj\nhFbG\r\n=7lp3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUrXCVqwN8QCFB9rGLJ22FDumEaKkIyu5GdTpckeLxeAIgFl+aMt33Mll3SA0N025IcqhLEB09Hk5pwReJj5b4nyw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.deb0e792.0_1620077646933_0.2437957285386354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.a3ff615f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-circular-progress":"0.22.0-canary.a3ff615f.0","@material/theme":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3ps//F7tlsLZKKNcjbYYHGLABY1P5WERAZVM0DGIah9Tty0yBJo9jVYFaoqh4EGCKcYfqwuSvNKzUzPbO4ZquA==","shasum":"e6327c9a8fb21ad7511a306e9ae0a6a539ceb928","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.a3ff615f.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHo7CRA9TVsSAnZWagAAtyMP/RpSeqkSeqXZzN2NOsD6\naZBac7B3RGLRcCU+qHeF/uqJ08YNwpkaMNuFbnWvAzywm0ob1mUL1ckxpK60\nXNsVmi48oXTG9LnO6+POh1IS2bHkbaATla7jJ8CtXngYTnlrSCltd1xG0R7U\n5Fq+MD6TspZsW1cNp2KILT99uO2qdANfL4RpZ94un+pXvu8py8ntulyE9ghS\n8D2krNCRXtTp0gTFeYguvkfintSNhT6zzlLLt3vIFJiMki6SB5mYLKBz1v3v\nwgQpdCro25umQSxWbi+AVpnlNwXTKQVhqAf7AcPoa8c+s1JRuN79vK7nb5Fr\n6pF4GMmbqOTsLXWGHIIuB4ZnkiXCzP79MA9Z1nmsmf3ZIUBrjqd162dm/KUJ\niF7yc3vQNESiJooMZB9rTLDwa/GCVTsdAlP6fGVv52GBmMMY+ZTxdbh0yzq7\nGgWYCQUKTAxLUCTm/MGomvMaLHCIP2rGxoG49o+dTh2wfQzMPXcMTodqH3du\n0pf68+YJEvxeTiiSQhs1mC8M/vGWmlYirW+qVOLWVwU3rA0jJ48W05PWZgUE\nJzt4kXUoleN6MRfVTHe3XP5LB+BXhsyTEvJ49XLO04xKCpo/gV9oVLqc0wnE\nBUA/f9lX9TpwSEdqSZnU52vmDxLqvJ180U71wkSp4WyoMicUaNcvjpBuIqmk\nopgu\r\n=uFcP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDX13HXTIdZ0gk7pha0xy2DjXuWoxlNo8MJHhMRoEKSzAiBsg+bf/0baXhLOVCxj7gTXFhGdOqTDfv7Ftc+JTsBCiw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.a3ff615f.0_1620081210936_0.539130657675049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.948ccfb5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-circular-progress":"0.22.0-canary.948ccfb5.0","@material/theme":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fvn5SfXkjDyfG9ZssTa+yHfDJFxWT6KyeM1m7f6pxPnlX24AznmALrXyvSeI/V+6vMQiKtcR3poJa2QlRVqHIA==","shasum":"0a40e38341ffccc31ac4353fbfbbb6116626aa81","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.948ccfb5.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJD5CRA9TVsSAnZWagAAt9UP/01b4QYwSJLVP8tum7rk\nmNkiaQecEWXShK5MUT0C5gEMP8yBK6TvV6X6kXvYdesrow8es2DtjYDFKIYx\nLyyiVs5tFevzlNQhTdqIkLG2JBfzutpWVkztssMRkv1ZAvk/NO6JXk68HyX1\nHrWFsSKtO9SayzuhijUww7/YhWWXMcCBhxKyjO2iK27lU9WjWU46BiGKT0Th\nDUpx+DCkU4xrgV6zk9F9uPofz0wbafNzOfTP+MFuB1MM1cj6RcFD7dcA2nu8\n9S8w+SgiwnsrCD8mD47/Lbas0E+pWq8LPPtGMomlyXJ77ZChUDl4sTGKCEp7\nwIXS6v6FSm1CGA819fBZj8OT0raAvvQNIlc3cbIwpkN9865febiYfofE4NyB\n3XLgay/nzsY4gvxkswgpG8G2FDR/w5aVYCL6oJ9cNaJqVhTCa4cTSrAf2GrW\nFJfIbN+SWdknJtTVKrZT5LAx9W/fFuDUJCk2dyE04qLRcXkjb9wQ8kTyrcoz\nvJPIevQ0rz/oXSseE0ZkT16TR99HUlE+73B+6oMnL2e7WN3apcOlFC/FToIk\nbWG9p3adxoII1SvHcw/apV0kXPWVchjv2AGbTetRWk/skG5VpcdZoSxGbPTl\nanhv9HrfNIRIuOMCoETtNxne0rtfU5jKNfxBKCvHudcDdmAGzeyEbznropSN\ndOxF\r\n=L1Ev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4zkH+SY7kmezcePG2WaC+hzeft/AUDPtjnQ8mTS0h2gIhAKRAoQsFqJD8f7nryjK11ImWzApA1sTFdnOTKhz0U+N3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.948ccfb5.0_1620087033392_0.6385656343940249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.9f8337d7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-circular-progress":"0.22.0-canary.9f8337d7.0","@material/theme":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-02zQ75XOMHkpKai/Jsm3KQi9o+MOhTCpi0LViCley9N/wDeGxzVE6e94gwGdE/BsyCOR9lDZ16KRbCrPpGjB7g==","shasum":"1328bdc398c8355fa7b32e16fb91037706a11f67","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.9f8337d7.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRDCRA9TVsSAnZWagAAmqIP/jU6gZfqUodPJSuEnWAQ\nr0R3zrgUx3LMc5byibgZUmhvxkn9TG7vFv2xF0cblUTLcJy7/IorxAH8DA1p\n1rS+SJd5AB9/JD24mQJqfxbioM7SO3YL1PoDwem7l7PIeCjkyIR/hutmkb5z\n8YG+5GvckitEZAE/WKm4UmekCBASY6he3sc5yiCVGJqm7WxiCkZRXbNFwKsb\n5DW1U8sTfBBslut9yowSF4e2VmQhE+yo+sTv3p3x8EURXX+cc+nDY43Nf8ow\naCneoNmoKYKMOKH1vieiwSPO1Mt2pPebO7YgqueIBm9gp+ozM7N6Wqvpk1i6\n2JW6tUleP/55TWxgxzkzTvdbbSnRHmskruXeQx0kidnQ6LT6XAzYxXJb70sE\nCN4rkRYpsMS82VZPAKnwriDmM6de/ZLUBCdTsAGgh7lgsnvD96YadeNgA1um\nccxkXWcxCsgb+JXBTyu6QBs57HXWDBhuSxN/NJE0bUt69gWU1+vJM64HQa6H\nRxE/SmqeaXqE6mQSRC8nXCuvxLKzZfnkkm4zw9KSdEesaJF+fYW72I1AceSX\nA56u2q25TNVruOeVXejE730bVHJuvabDm9coCCvwfmPJl8ZMMMvbeJAuxPvE\nS7yijZVDVUtdAWg22hxjKXNCCetbyb8LT276P2D/Q6grrhjEt2Xt1pMUgu2g\nPSGK\r\n=5HjU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWR5CQXMxSYREIr4UBy7ruhTGrc1P9lkIawbt7pOOC5AiBnBHZc4UfgGJht2GaANF8Abw4WqnkXOqoyOKW43+dxmQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.9f8337d7.0_1620153411190_0.41668331514658896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.5813480a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-circular-progress":"0.22.0-canary.5813480a.0","@material/theme":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m4WFaW0WdEW5KtY7pRDhKjFtP4kUp3jHt4dIXsIRBfTZ50qbxVyKnZUPYjadh9n9X72VTnCj4wPSjkfBj8lwjQ==","shasum":"cb638a33ea81d031b83a9646c07dd912302f4f12","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.5813480a.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMMCRA9TVsSAnZWagAAvpsP/i7fW4X94bDH1ZdgMOvU\n/9j9zs0OVjYYoRqWUnK6JLrL4Twyi5gy2JN2UOxfwtrxqcHJvxvEKmoCb1Py\nymRZ2dPOUjTLsN5OgkP6WnkjTS9Rv9rWN50kbvv43N5j8nTrh7QBIm/G9srI\nY8WP+1TTXIeTndZ9OKWnRGcGshDuUuSr3Fb+yrxGza3yiSS/44s0ImeqqWGw\n8n/IU+NkwsSDKdRAiS6Vama3RceGTTEf5wVVRFUT8Q/NOenTVbHQqOYoDHlt\neYs3VO1Fp0CM2dieawuTum3j9ief6R56r9y7BBiY+jLGVfY6/Sua/Igh15eY\nk6de8CV8LwOIXtam8Uiv/w7EilQ5PlMv5HYtyWAS30JRrVrlVVyouUrSqEvi\nxY4moPvf58F+LdADHLpvES6X54Sbt6mJnKz0oIKfeltQ9xnfT33WvH0k9Ghi\nE/E8H/sXTtKodUn3Nit+kZwtTlBvcZFg58eT1Vl20SnupGQToWV0QsfKRI7l\nK2AkUOEKKhIGzwCvEWCYiVii2ZadcxBp4HJQj3KmMnmbajlSFTFONXOiHtI3\nP4vDOBBZVw8C5awuVsQmYMCnouT4KRb+w9FT6Ctiol8/viLeiAJ85Biy2jwy\naGuYKMOppVaS93ogVO7CIFy4wP1upCjKLMu6uV+TaCIB8T7pOUJV+J2Z1rKz\ncm4x\r\n=YhVz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEe3fvyeXeCTSR5BTJ+gFFSCn7fTgILRQxO9nQcl4x+VAiArXzVXQkRNMz6tNJtCwd9ev+EJnbNLvDP4z6NlFBoAjg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.5813480a.0_1620239116130_0.37343284924178577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-circular-progress":"0.22.0-canary.ab7fc1bf.0","@material/theme":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MVMZWNvcyzldNUxBcs0J5Tz7F7uOYVsmf8s8ryN4xEfV26y5xQAI30kX4ZvrL93aMhTN2QyWuNDtuek01P/m4Q==","shasum":"f5443bf4d3dbacd806b433c8e95b5a6edf966c5e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5rCRA9TVsSAnZWagAAJKYP/1LhDV+XOnChu4dTvCmt\noQRFoCSz+7ccepzFzBN6kOtHjBZXe9pRAcpL+Mg44DZijIQUi1sudQjf8PVN\nKeB0qKsdesBL6whwGjn6e88+D9I7mRE1AlFivTLIxCaaYn1Ofw56je5xWUMm\nPEQTy5EMa0ehtqEYC/bMHS8F2HJSZZWPQe3ff/pCZlysANTfY8t3IAl+Rl7c\nga8+jndpDxI28ACNwd6wNRmzneJ7d9U9uRP5EbnzlW/WUrWo9iz+zcZJQaP5\njX3XP8e4a+lWIMbfF0ARHN+ehtN87vejaHV0hcMlpbeALUFSQytUtZSY1wIi\nNGbRHHzTPz8DSwvbTx+zpWj34H5MwygnAypYZdMC+9CMUSg/eNkeah5HT3OR\nudOW53RZq0QrFdABuSugJVKuafhQRsor6IX9bclMB1GecF8Rp2FAkh/I3Cwp\nwK9LH65dp2ND0znbSZqjhRcMhOSpjqpN64S4/iZkk57bAcLtdFPqS8XaGDIy\nly9JKnOj67AkVeb8lHwAN1foFOxVfwtdOEKNVchnPPKQBWxLH+9GYimBsa0v\nVwRBIz7h3Ie5lYdBi01YiV/hb3HXosLcruFDqxP8glNx1LkjmeT+rleJs7eK\nVY1gB+AeRklRKxoqFUZtT1R81rTPKeXM0DI0XX6DlKVQPSobF5n7ZBHTHtAG\nSILS\r\n=xMyr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEspCmkCqvvk7RTZ3YWtjTtM65bJ1RXua/RjbVJDAcXWAiAf9fzokppBCFhM39MCKCpBsC6IkGllERfUOOs1brrg3A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.ab7fc1bf.0_1620323947276_0.8097318248791332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.25693d60.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-circular-progress":"0.22.0-canary.25693d60.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qRUQo3o6hJnE6u4bXtHmJ85RGGLsUUvC/DCWmUDoABW8ss2xrmnMeJ24kL5pCJwnB269FLkHV89fQXVdVybg3Q==","shasum":"32b604015917632caa21bbd21715765fc6bed495","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.25693d60.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdmCRA9TVsSAnZWagAAMAwP/0QDe7SYX+jJQY+bmEOW\neiOSp3YDG9oS4TjF619iqpwQ99hhufYvDttgE0ZsSIeBoU0HOuUw9K9BH2jK\n3PUDuvbcDZYBCu79mAJVGCOYproTHjjd+qfFNr4Psj/TFBqEMnCXkT67XDxK\nETa4jdrlrtluOhF/zvMPvJ2K6buIv9dfozwV//15miF5TTJly3HhNIeRW29/\nF606j41b2CMzNdS//45yXTe7RHVquwvzQlDEjnLQ54AzIfdz0UMrtTgPT17c\nH/g4RBOwPclOM9qCVKYQi/4hYCElKPiIglZMf4wrr3VIxscmYHlzkxef7lDr\nFMlr50AgQ5A4ouqdqVm/POXoGkp0Vehy/p2+7kXN/fsqplwKgXiqS26+erwY\n7o7uuJApViBeRHfd4mCraMMykcQi5mYCUXxrdQ9332Fk7c4tuxs2cwtLK9ue\n+Olgv2ZWjNRt15p4Rw+a2B91lg9Wc3SxAxsGC04BoHVKq5M7INfX32CMDqgT\nmX/OHbGbr1ILdvhcqJZF76eC9DiHtm0m6u1MfMO4a/Lkc0Ney9fo2PHXwMbp\ne56uyPvY6leFm25Knr9dULhxnP04Tq3NxQn4kzhfzPOO5ysDKCcyBz5j3EIw\nA/vHRoyO+SCjy/wqCX1QqOwnUtvD+AY93zuBt8qbcrzJ2x9RcdsJ5hDheSn5\nZtj+\r\n=2F++\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAllNxk6pq0xQb/VK+fo8/njKZcWmXJdi45ctS4kmuwAiBKaYxq2XOG1pR90u01mN0PaKmoK1OXRt+AWRm0bK7Hag=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.25693d60.0_1620424550022_0.8196194786352557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.c497962b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-circular-progress":"0.22.0-canary.c497962b.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jvu8bQiKUJ6WyACPHWrh/Oa7Q+vGqUSLY+ExmRhlIU99JGXwoVg/zMZMBcPRI6Zik4KHcAFC9AsjuZ7vs146Og==","shasum":"3f093c07f20a383b8b13869f0cefa29da1daadc7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.c497962b.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0DCRA9TVsSAnZWagAA9IIP/2cF7JK93qKHnOslFpMB\nhkdwtZz+vSOEgKQ/HpYFMkN+x5lNyQ1n7N+HUG/qbyGMhtEGbFsY7nMPdyEb\nUffqpXpTwEk+A3Ly4GL6BEoACH3k0ts40eJsM1B/Oo22j6laHHQsX1c63bF6\nuDpbYmeA8I747H7rrEx1o7QfFugGqFmciOVUWCcX1RTGK9YolJs74ho7pd4z\nZPJgyyciXYAEM2Sh7j6+2ythmFcPajJfL8iMN1XwerBMYOa1oCiinWkvOC5F\n1Y0VFXbDh6WsmptGKAmKMxCAwNoVj1dRKIcMUPlLqvZL8mDX8vPrMTHbuGwa\nzuN/w/AgyX4XqoBxHswSPH1EGf5uKY25DCKXU55MvUbTqgNfby8cfYmsNljG\nStk3tVoM2SSWZBRV5WdE6qFXLZx+U3nsFAXvf29yRjhTwtxLnZh222g9hUoi\ng28pk/HzFxbmQTqOsl67pSN5yKwGz46jmbpC7rL/cd1wZ6er+VyeQ7Y5IfFB\nEOO/HlL/lMOWHhEhkc1Kpw655IY/cHcIbQPHeJ+bEU2XyntX6YKj68VKtrxo\nSXMGHYs+LaXkDwFku6lWKkjquhZpZ/zuW4UXnP9DqhxbGPts/3Z4H0t6ApwZ\no9RMma2ICu+W72QEspphNxvcKP0XzwWde062sWo5YI9mZ8CyAbFO3a1I9L24\n3nBY\r\n=Bbdq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8NTD+rPk8bngoLhwULu5U0Mw2wOsgKxdSim5uluaA7AIgXHSRw6mY4MItc6Zy+JNp2i+b7wNf89RaFD7nx9gPqSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.c497962b.0_1620425986784_0.48360317256364893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.e300688e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-circular-progress":"0.22.0-canary.e300688e.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-stYVHPOpMgLo6WrJlDFjxpwDfRdlqOmmQGkoVkfIi9XI1bl91SFNClPJh2oIdDYt4NVgMYIRYSQ3gay9j616XA==","shasum":"934da8a241991c8d223ba0c6007dad2721aa17bd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.e300688e.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4NCRA9TVsSAnZWagAAcKgP/3Qld1NF4s1k9Tikf1UC\nmVpnnddCHrDh/aZHcu2aJD+wVvI1rgfGU/iRQsCi4ufnjH11nkKFB3pTseR/\nN7tU+Fcvgd5+UcX+s+n+I7aO7gPrZY3G7gaIsPLqaubdESGoYMm7e1ebBw9a\niDEi6Try/YYtfuGjXrv3otwfIBlOQZ3RMJc2Vi6Lo1XR2QO1FGZrnxG1uzje\nIBiIQMKeBxberLuVKVH5jC3NBR5j61khwx4FJ8YJGoEw9y4B67uBCDNleSBk\nLyS/zEGQ5KlRG2+2xsAkBQbm8G5Bw6IMA6yblvSgul2tiIfR43JWS7s2Vtz0\nSDFIywXc0CH8nvy/ssVayc8yU1qvu3Z6dHchJzUJRjrCyQWUK/hGFU+UDNce\nr8+H1tWQXN3nan17PyV33y0jW1ySio/eBXjHeZ2RqMCBEE6YJUm/1c5U+toN\npOfMtzbAwMdJU+Id3Mfghz1deGSqqm+2b+hDzBoXquiuIVBJRYNqO9tYtXA8\nM+POWNeEegcFttFq70eAIMeMUPbpPOa20PLlFe7aFIev30cfsjKXV/Rv7hGP\nx2eB7Y3vVzTCzDKqycvcIzn6W8GG1uE7PH4RN+6ozMQKWXGiSPEmpd9xAfL3\nBFBogp0cN0ezkAWX6J7FqoyniYqWzozre8//pndKERNPn23ZUunbTjjO0OGq\nKqrk\r\n=PwKd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHr0kC7trKy9mNa+eHCUNboz217ivEgrN4kpLJWpG/y8AiBWc0KsIgI91y02XT4daMyUH+J7d2B81ExAoRWqlEJ3DA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.e300688e.0_1620426253249_0.17965199122981224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.d70287f2.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-circular-progress":"0.22.0-canary.d70287f2.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fwYwrgWxEK8YKjlcTWg4Nmxakw98wXjQsPt62gBFcueL3c9pc026Nk2uSJIc6u/LwefY+am23rbdANJPCqOXAw==","shasum":"52ffdd0afcc8fa152c1d70d14c83a9600701c0f0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.d70287f2.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmECRA9TVsSAnZWagAAEe8P/RWISgxCnvkS2j7jPlBD\n9kWLJmTZORR3kiDyVpsCDNwJJ1pmNyXKvWSZEkre9Pnh1v/PhN9OPm81uN64\nWsW8AJsKkHoseBq7NaLWqDQ4iiK7WD+49GeQPHcaWENqYnl9SbLxoNsOAbg4\nWWjoIUAhfhLl+AJvPrNPU6WNg5HuFBJpJYUHGUfGxPiWzx0+dTHia9o9x5Wq\noo1uhQcHlEYDt1ye+NKcQSbVME6eW+sGnVsNjf5BWNqqy3AZ1flkY049vZQm\n/CJ0MEAdm+clKsIkTgwYeuO3kMgjCe5HgrvQ9y2DdblO7y21H6D1fYQbS5t4\n/XFAjPvKK8P6JhRq5UfPPj9ekoN412Ihi+Ppd9RqL+Own8LtnGyt3Av9cKLi\nBDZ8A/ZeTO+AdFyo4Iff5fKHdtvtnTKUSbNF5l3dgU/K+r+/hu6xvj0+ecNP\n524zi05st2irD9+Tbmmkm2xC7e/bihYCAVEM8COsD+fTwruj0Nc+6y0qjDKM\nlubNd0XmdgriBN3ZlJHGsxiN0glXIvwHm6w8INSxwZMjhfn+JGnvS/B2gpna\nYZXxAJkKQ3t9TvlQnJfyRee6hzc5WswOiZXZjgGDg2mQmTpimbXE109r8/Q0\nG015GPb7gz6Y3ihQ1LgshxELr61+E0g0G7kiZjZdd/WjwtiKf8Vs0vQe5s4X\n3MWj\r\n=RTrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuu7hy5exiS09IU1FDZJXnwoXgj2zVZUL4GpjD7vy5oAiApyELfIcsnErU/iJtz7yDvpNJqR+uuWzztQX6VFx0dQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.d70287f2.0_1620674948212_0.9836026125278452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.02e841b2.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-circular-progress":"0.22.0-canary.02e841b2.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Yg/dT4lP8XdbEoVQeHKTHQaJx0bNPQG+VvxFqaWwHoCxkE41aBtQo+xJgYZwD4ZH6ECfxUQZVYcr/X8NDaMsjA==","shasum":"8fec4b0556fc90b3e08ad174d37cde6d2d583db7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.02e841b2.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjOCRA9TVsSAnZWagAAr+UP/iwOLmQw36dpGIQ892Jo\nbF4KQRNk7VyRSsuWc/HylXd1BMORBsiFuhu6UElLd4nAkX7apH/Wp63jlZzd\noaopuV1qOvH8rmUuY+bM455C+0jyUdKfWzHaFO7IBBaOvmIJsCN9MedxQUIx\n4IfU5rDYwqEedmZCz0N2Btu77be30/yg8BFA8B4GNO1/H1HsVtRiP07xbtr6\n+t8T1hISDn2fp3s2QGDHHVjtFlYKLEgfUqy2nIa74vCkMs2D80uJUkw69PKz\njzdA6b24nN8mPgAfiZQQFAZKzH1KAxk7vdDj9hyLtQaGBJM55oloKdzmoJjb\nerpTsppO/wo1nWX/6mbgQZ6MJ5V5j4lm53OhNjNfvC+8+aIiEKlzsluCOHMc\nipAfRE0tNERNReA7BfQXUsYzACD0TpqwtxzJWSBDfQcMBVhqMstR/44WOt/Z\nCbNm+ts0+T8lyhkEQe0VX3KEVVNISryx8BsPB7Faa81crwqMLyj9w9ndLtRx\nAEGeL9xvGEMeq7cMCfRIowMflz6Hn2WPtG9N3Q91OJeZhuhASjycbvXgunZM\nhHncEhNPZT+EFK7vBEW1hvkkZMCqhr7khSL7A8i00rk9jyko9zKLd0eH4Pn2\n2DZlwbvukuf+zQv4UpdImcwd7s+WtVzSGjR7cxtTZCzrGt+HyV1IqrkcRB6V\ncnNY\r\n=jp1w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDI+09ta1ewHn7/H7PdA3f53CD+tTVNs9zLuCZrzGvOQIgJd9yKZ/sRnRA3htQT2Fa8Ow33LNA2JizfFiCKmaLeXk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.02e841b2.0_1620678862203_0.3691720960454776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.badda2f0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-circular-progress":"0.22.0-canary.badda2f0.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Liw4om08GmgmCg38gTCKXAfSow5DUqqCOAOnhKOEmfF16HhZD4hgZzLqNGAUy/JgvddTHe7UDZJ5JQWxHVXW7g==","shasum":"76e74c6c962d3cba5a85f7d2be2b36f930675387","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.badda2f0.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEWCRA9TVsSAnZWagAANjEP/2yaGrkpaAXwsUqgCkMe\n0lSzAJKu5lm/2vabecNcRDkV3Sdv2QhIxM1lldjESibBvSvJsUWjaJYJgwLL\nTOiSCcnqPiPXgCr8LpiomHmra5ecmQYr/MYTlCxPEtWUHXZ3hh4N1qG/lYJq\n/vvm+/6oJ1oArRHD/uZ1gV2KQqhKH9u9Hcct2ehiQE5EcPBH/9DB8EV4Yb3W\nCAf27UUBbTSwAJwr7+VWxIVlnhME85w90c3Ri7rRm+dsJunHe+4RlVkguHVm\nXYFa68Us/p+uQl99Gf7bwKgPKkeLQsP/VhBvQhiOGpxb5b4LC+cGU+mzOzOY\nELau4Z7Eqa6uhXYmHrgU8TFQ3jRu+mxj7OMAVcPTuni50AGShVxxQxTKHa8h\nvH/0F+ZCVJjZFWZYOjF94GzMVqH38xnxQzQQxuXyGDXVEhX5ePHEsCyRMpvw\nAn3ilAnpjNZki6x20LW2kJ6v2CrAehdk7oOg1sjXJvSobSCDE4SiCQw2WF2B\n+QI5mWb6iYXUCpUNpd8ninX70Ip1hVRAVJDeWsgGUnEnu637DJaoGWLC53m0\neF2i2h4Dw9IROcJT4MbK+rGCEJ/FWjnpahRuTzQNU4EmYpan1RgrV7amxjdg\noCTMbotRvAvp0kk8oYbGUkGkrLnMBkQGtvAWmhMnymd7NpJXoNqrLPmeskji\nowtr\r\n=Lf6m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCio550rXMDPkxUsyrStVUeENzE+JKhITp72k0G2/i0WAIgLXb8EoddpP2m9maqfQWTcCZ53fS7tJ8mvhVBDGBHtug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.badda2f0.0_1620693269589_0.8393634567715351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.004aca62.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-circular-progress":"0.22.0-canary.004aca62.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E5OmYoU0Ea3Vv8WQmC90XviXmlYedCK3GSG86QKaHq5hv3o+ajWQsZVF4hsVEBJVpp+5q5Em6NHo5fTcr78CKA==","shasum":"d5e762d487c0e019f0b143c076bbe36e6f63bf29","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.004aca62.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseUCRA9TVsSAnZWagAAAdkP+wbLeiKPRzWuE823BPHd\nvnih6+doA45wh+TA0IqVnqBDxT1ToMPpaDUg/gjV09z4PCkKg3u4uy2ozYC6\nNulqNqneDGizTlMlCBoh9gRUvDmNAeFnQrl6uRKr9FF+iFSt5W/BmS1GEQ9t\nlf7h+cCpIubXGAre3Hc5xy8/mgmwLvdPspOLNZS/uFKz1b2Vri5J7IjSlGn7\ngvsidoCa6SidRK34mxcrSFhtSp5p5WSx0A5VA45E6BwX60gRrsJGgs70twHD\nCfzCu0Xjg9ucUQvtEAjFazvX4vTk4B2knr3jZF1ognv6qJJp927bCMUDzPfH\n/efHwVQZjXwSaVNLIpp+espCc4jhMiPbV9s0v59TU6Kq3oWWlgnAKMAySfzl\nUZWHzNHnqxCJN4GtIucJCV4UJFwpCdDZPIYWJ1GB/WjMTkT+IbXdLZwgV+K3\n8zIFnOYGQP5HyBdoo1cPD5JRMgonWL9N0lTozoHiANnpThcE8bdm9Ha/fgut\niCsyMJxhys2RZNyLhsgCmlgVR80QTeIlDYFfF7IxB9regGq+BanGgJnLRTX0\nDMeT7C+0/eS4q2X1XwMcjjR2t+pkrrBx93LnGVcRCyqfK68jJWe0yba/CAoc\nMJ1l/cA0TQORZAiwBvYEsM7JHf6yrMdXfNSPUQVJme3T02Ci3VwzFbtT655l\neKDb\r\n=U0+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGR4KAs0NLzwHQEgeV43bEG1PQTv2Fh+Qt1Q04JJQUfzAiEAhOeLK9Sy1HM5uo4PMGPlkXJfRC+iQgXtzo6c6NzAMv8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.004aca62.0_1620756372389_0.4641976803066714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.4af17446.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-circular-progress":"0.22.0-canary.4af17446.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YrwNfQYuSBG2KwTNV5yKIYoJcdoMa3dQDtE/gngoNJCJ0nfEBs9YsQ1vYA4FUWqfoI9e8Dh0Mrs1uyNonSZddA==","shasum":"9b93cddb36dd680123c92fad99a805fc42e23a3a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.4af17446.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDnCRA9TVsSAnZWagAAOGUP/AhbuzX9SBtFMvPF4RNY\nUKeFwj/VpZQNRk49RJ+D9NaXm4VDZobiMqVjFxConba93puF5vV4PNylLuEM\ntL3LO/EFzf6injEi20chYg0V2u3UOOcsJl/LTlQ9pXap+8qzKgrlI24u6SNF\nv+wX6rRYLEY9ZHi9LA+H94cZHgn3KSKTxc9oN7KwZnuy4OEY8RewVUVQDW81\nfmxvEQhfL/ahXrxWidhoVtLLkOU99GRARa7xjcy6GVTlTcDPsRDSa4LpXsqB\ny/7A0Su1HoVX5Db6q2G08XAnvZxAHaq/mjHCe/Hd+TIXGvaUhN9CTRStWXq/\nQuBSBYbZQRNfCsrd45gar32nIbSVazYUyNye5DkvS4006jpqukMdCXnIoQ5l\niwqOl/p/2Sn22IpQVdcCqYi1jZuIMYWpEkgfbNttWGeXLhEBsZQjbq3Pv4zn\ne1b4JK4212VPXYSvmOBI3tGQmlsCxL142ek7Fs0SES0UDWbmC9tm3zH101xe\n5H7tgr+FXU6VClQ4aV/dcBuCzQ14Oq/0RswG/a/ySCu2Hqsi6cohjpeNBsDL\ndm5hnY79bfc2ifiAuTchzU500ibWromhquSJrLYr3wjd3AvVwFY8HDkEWZWl\n5XX+GtGwbH4JG484FewGlZddA9kN0Gje6J5M8HkF1KU/FbBxkxKhV8xCaJT6\nc/bW\r\n=dxK+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk0NU0xfRKLakOCR1VOMDTQ3cHimY7uMt0HTrvyv2i6wIgBj4XtgqP1VfLwXozxrDcy/slTo4TPOLZlHYB1KeHKO4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.4af17446.0_1620758758962_0.813074977448385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b94d7187.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-circular-progress":"0.22.0-canary.b94d7187.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oalCLLtt1gjSSju1TikursjKlISaWPx5laC0CtjKELD4RC2jo5fPy+O1Zo1686dlvb+hE4mLoTRn4rxb4R+T5g==","shasum":"1e2310d73b984cb0e5f74c0c91b6bb0d9407b09c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b94d7187.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtI2CRA9TVsSAnZWagAA1+0P/R1gxO0McfwFgG0fUEzt\n2hIx4WXsM2GHm2PzFoa2GH5DWQ6/kFd/N99yLqWdMBIkT3vDiyEWNa7Sh4Pw\nm5zX+Okg2p9guuiTupIqUd2jv0rrRZEFGoogz9gZWM1vzYYhR+5OaexYInA0\nI27/BPgr/X8rHMR0JnGUYzPQPCd+MyUaPuDir2djFFiSLg2RRF3m1gjBtzlA\n4jsJU+z6WQkCJTB02YntX+0ei9/e0S08HrCjxbMOffZ+4oydBM67QGrPSg/q\nmtlxKjV/7byGrQZF6rYFTYMXrAKfKhUdI/P6PBXpobyUCsFmQhOjW1RvXG3k\nCB/QfKw8JyIpF9hPHedw+UKkhVhtUKXFxIxbBhrpYVWiRoFcOVMO3fju1p+6\nIg7Nvb2k/RnEUDQNLWWyga4oAci53ChOdNTp29M6RsSSiyfU2Qc0C4bZgAjI\n3axaJ/qEmuZmLKGnYV+v0Ge5zxf7euUYT5xadr8MHsMNrwdr82GH5s5nwzOt\nrwSMtw6qc++F+wmbqZpxC6hhzpU9OI9yxeFVpePzFQWmqiOMR5DO60dpI6Gj\n3bd7GM8KsmXnvGnXLsOg92IWsZfOzW1fFIKGI0UAYRqtvCyam/BIDFFePjY5\ndfSaIWcdGJz6uQuC+5FOke6EVgF86bq16vAGOLt69bsiM+o8Z1MwTOAEyMOt\nGgbw\r\n=+qfl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu6o3B1mYY5cYLKKivyOpCgR4BVo9uBzsgZixNCNGghwIgFJ1wbmnDVry2Hkm0WFq/UwpxJTK9gOeAY0GI5uyjCrw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b94d7187.0_1620759094344_0.2227195207980217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.4021b2f9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-circular-progress":"0.22.0-canary.4021b2f9.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OHBSGFhfKVzwq5ufIpD0+vWpX5fLXBnprYulK6a2Cg9DhmSuVTqXEjYGGMdOgYNuTut8LMS2Levm+nfcG5/0zQ==","shasum":"3eef01fecb92dfd61134c414c9869dc326657459","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.4021b2f9.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/5CRA9TVsSAnZWagAAGSgP/2dWsWpvg7KGYYe/MeF2\nTOp54Init/DxiDhLr+NhS0eUzuVxSmUornh1PgN3P5eT+OT6JbxJgCYj1t/N\nX0Ehbuz0dQZJPVuk3a+JG8AuxFNsIKblsk1hk71atY1a+x76HXIcT91/BR5d\n8h1KRuFSgb+4OWLyTikCYMQIMgrX3Eh0p0K0ppojO/S3BLLeXOHia6ZP1lkd\nckp2lwf2BA9p7dcsfdjW6iy74qPpZ5BvU+G6mmF9uuO+P2fwfi8TOzL80mhb\nm+6xyexUXeLAYZoXPmdmjR3oi529jHXT4VHZBYOjhn2+Vka+t5J32slVaq2y\nHp3cRKnNBfzporQrBZ9CvkyNKWkpj3w9L5p6YWKTtV+ENs+/eNHcspDpkrHG\n+sBm4mUrSiuzShXW0q5BlMBLTjYKiirMltGO/E77qVNGF748Jx8sFvDRe/FF\nINmqc7EorlO6hpYwbL7TrED44xvs67zwxIgbN4+MVFUbxVZ514v195opmnk6\n/EUQYzhOguouSPbyaGZzX1muGKRi+ozxPr+HXvPx17YVF+U4Wq3VDvJcGKLM\n3m1BGNer+d2rwTDKfAh+HYIJNWRDXRpMIDSkREFJQ3/qZR1EUdJuFePlT/iM\nrBUyjvCHww8thKcF0Ku0YwhzmixIQowpsgz4SY9Qw18N1f5edYjjqg7o55a3\n3CMZ\r\n=qYwK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5ovmpnUtfDzmMWH+vEN665+0gaP4Hkicb9jEKjE97rAiEAg/tVuZdKx0NkMh1Y+LCSFX/YE9/Pmco9sCtrh2owhYw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.4021b2f9.0_1620856825137_0.6356602605687831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.6a5956a3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-circular-progress":"0.22.0-canary.6a5956a3.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X9K3bae3lg6E0M7g4yuJKW5OBRIQm2Hjxe9NSa9+4rQMxJLScST7zlu6J5MmBff8mnJE/5zx0B9KuuYrJuTtcw==","shasum":"0c8ec95367db23915051eeee8a49ecdd69af7ab3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.6a5956a3.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPtCRA9TVsSAnZWagAAPekQAIdcZUkCAuKMzMCIzpZY\nL02QK/BgtZNPvY5wrTeYGhj7weGGZjU5OERiPAXL4g1eR8yJjxHlmpkLYLw6\nAKwvydtEUiORhrGO4lzuOG9TbCnrUXaLrIWc6d0ZeraS4etTG4yIDLEI1xzU\nFlhhrOwWNOoYbYKu5jptbucFfLJLmZYmyqeRhKIU6SapwoXYILNRz2i221qR\nRsheA+ETPVgWj7I1o6A7NmICnfURWi16BWvs3yZQ/Ua5lb2lKoDGcCEUG4DW\nQ4POyGRplaHt1JEIj1X1cNwLo5TK12LCT/2dLStEMHtfxEVqLsAZqkukqIho\nPuTvKDC0KhrlG7/6wYOpR/vO/R5X5/K65gVzEDSl9I2GeHf8JpWkm2jj9xZR\nY6iby0CP8FiwLGAAju9wG5Hx41TPDsgbV+CJkYV1M7GNrxpXhsCTtaldmjE3\nuQ8xRMTALColkQ0JCimlUj9YlOCzDPoj4Ox9wWH3ttHz9rAteUUBANfHu/2W\nObvLungWpdN98zqyxgJg2ij1on2RlKa4msj9OYsK7/tnVMkHWGF0WAwqicOU\ni69TA6j/ltJ3zSQBceLKnvFSuB6C9qwBz6gbhHfC7Crpkc3UbtryZyAFykPn\ntJOvnc/CVosuIVLSBKK2t4LHWkJ7D8J3keRZPhQ2diZF6se0goSGqMclC9k+\nPNoA\r\n=lZMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMAZ8X68l67hoEXMsGqfDR/6nG7gDXHhoAIgY0Wk2d2AIgehOyPsQNOjB17kKt1H7fOD34VQRBAWr7881YmYPTxmU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.6a5956a3.0_1620857836671_0.2580603270989452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-circular-progress":"0.22.0-canary.b6e8a74b.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6lbYux1jrJjD43SwvIXkU/TYPKw+tEeXKhl9G5Xcbq9+//7y38L4eQw1PKZmFgI4tlD+5bbsoi2H9YgESgaCzA==","shasum":"b66555b7623815d5fe619783c19141a902d9349a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b6e8a74b.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF64CRA9TVsSAnZWagAAnIAP/j9WBXvcQRZs4p9D2cC0\nyDJojmepWPFQFT53OhjnfdgKUFg07UkADNy3FS93itzek8tksxeNlyj9rjqZ\njFPnrJPjNwZp/DGNqYIKW7kmk+n8wbU7HZVGKwRf5sCKIaXEpJ00T4sXdAKj\ncPVlG58yKpm11+76YvayhV017yB3MGaNnZvyleNf+V3AC2/t861YZkqf/CLr\ncznfUu4TMwhhL9drJWwh88UDJ/lnhAe7aHCpzjTOAAMRvgFNL4Afw3FYgtNc\nDnCsO07j4L6rnhRFkjJgVxpZoB/1KK+L489qPF1mNvTieUVvo2kXXRqDlQNy\nVDjLwqWFyaU/vxkUuFRRkRECI2GQcXhCTC1lutjnJm/qb6hguqYnQnYSrObJ\nt8h7pvJXPiWbr4HSweYWxelamBHAsWDRPJw+USFRyULJ6o5yGklfkZ/P/F9m\nhxohBHKTLBXYlFtvfSidoYFOuVhUM/8E9UfNIq4o7pyphpNBZ8ldGtmJ/gXx\nAXYhSmN7xYtuYxpVI8rP00zp2DYK2G8WAPuXHbFdBd7ieGCJNlaB76Lpcg6q\nCEbh63IkgbwxUceLsWPvD6Gd2TfvxZyFNwSv/UlCy57m1cWPfiljxkTRHzU6\nDAThxpyq5xvg7FMDYAsQAdyEFr+KSQJ7xP9UCfdmSGo5ksx9AcgQmAHNW10U\nJJRP\r\n=Ouhh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFj24wJ/DygD8y+9T9gjGvhFYJFXa/rYe7tTzX/lQbBkAiEAnIZamCp6Ps+op6Aop1UkctUwUPgux9RAFhoEOBgp4Ho="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b6e8a74b.0_1620860599993_0.8419836042562556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.c94e1030.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-circular-progress":"0.22.0-canary.c94e1030.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bpg9JGEbLpNMrc6z4S9qQEy30U+7t56dqYlNx0mel5p02pHX9eCBdm2+4YKjhCtugRHuHqCK0yP7UDsU61jJxw==","shasum":"a3d535ba34b35c4d26526fc089c8140ff0b14c10","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.c94e1030.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGATCRA9TVsSAnZWagAAB+UP/3Qb/WqG3Z6Z512iIKbG\npf/D8fdUnqXBzgQHToD0IlhDIup5LumV1CsWVLc1QKMUtLIeM68Gfmyc3Xpb\npG5uyaVsA7Y1NZZAxhX8qQtYNDQKsOeSR+A6r08eA9CC8rZ+XGIzXn0k/lJ3\nSQdfSUpclTyf3xeXI+K1lxxqOj2qm/KaAhuvwWhpV2L736x+Bme4zRSAggoF\nMfStLuQuoLW52/VvYmDt7xmfpderdfFYkYImgkHLc+V5nML9YHOZa693RBnE\nZB/i+tlM2X5EfknH46ZNQGW/cdCbVxNPAHrrj6RuPg7/yeHFSt1Az6TMdCYR\n0Xlzx/t/Jppn/RZcHSlQooaiZduLlUG22H+0aIsuDdS2FCyKvg51/qQM2huR\nusl/53Lgg86KENSMrmiO0ugn7Q3vBLCk+3TkeiOjXdyYEmA2jrSLn1m22+F4\nDwqiXAGqi5sPawK14wbj+MGZXYCW2gosAjy826/UoNpPAbwEJ1Hh1ueC4S2X\n2OsyUbU3/E1F74cm7tscbnAekxr4zDP5rE8CdQOHLY9X7AtLVLKUUIu7P2dD\nxFAyi/JhQP7spmysxgb1u5uDDUpUA9BL88FbqJ8o1t48ccdxSHbgp8j8OnnV\nyvQZTSJbdgeVvDvJXqpLCVlQDFla9UGbu+oLSmXtYqo4tDmbJ6peD6wG7X+2\n+0P5\r\n=fL1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2LEZxzPft7S7CRxnEsNft3tCKKkoHGVUjzzhj/bj8wgIhAO+wjkCqXAJgeqgeoLcGach/C6JhuIHWvMLp0OBDKAtJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.c94e1030.0_1620860947041_0.2096652130550969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.40a34e35.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-circular-progress":"0.22.0-canary.40a34e35.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8ORaUJ+ogLxXz7ShEmCUS6MoO2gj4xCtd/+gQ9PZn5lObtzEjo8rwzfo7OAJoWSP42ytqCeTyKsHFopJlng9wg==","shasum":"dcb9f93569361c546a8c51f439db820f796602d0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.40a34e35.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuaCRA9TVsSAnZWagAAQ1oP/3k/fXtYxiyORbTPsJko\nnX8awuQg1SZRMn7ioTz9VoCzfOpZ5pLy5cZGCUPLCjhkw5W348dEkD4hUKE4\nNRUYy4W0kF9eGUO8+fdv94DAqzIbTCHHLQSZrDC5zV7aQndIsisUws6ZiJdm\nhySOCMHo5r0M8mX0x5k3Hl6ERjIoz8YHKwgHjp5uwzipVajHO8Eg3wk6e0oq\nCbUsarIDzeJ/YXHxh/+VqA1LPzuKVlLuf+7e7CVXNs9Qvxlv4yKaG7FPxfFp\n32FEQKO0Xvn5CAj3TH30XgqNJ6d0Q+HyZNHcu+UabKKFAkwUdHt4vKRwEuU3\nJzLtjehD8LYhyWcZPgzWdAmHrDKIulaRKuN5ZVgIEYn0gvuEWLOj6dxLGgPx\n+Xxy2OS6stfNlOAIlAAAyGtueuJ7leJxoseFRlvg2I46cYmAjnl3flG8dUKV\nxVz9jmuyoGBySDZorm3zuaCVV8JqLGvkhg/Jmoa7dkpan9skII8v+63mrir/\nW4AsY0I8WgbdzhGlueFaFzU+J2FJ/ZQcbG4Ltj+04o7lUSWCEWyGfpPqytZH\nPygO1BLqonSOSNBXfLVQ8SOS6kvpkJFZgrNo5N5/O108vgC0eKYbEyhDDdaE\nrS1hH7N89FCEAvgs2mSarsMg6O5qYcM2CO6voU1VKT2DMLf9I2QsmPnOD7Kn\naX5C\r\n=EtXQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3lAqzapxgmp4IdM9HoHI68JiM6WboKuvHJdzIHxpybAIgP+YyhK+s+/ixqWdyd+jFJQr9i5oqAVwl3jMZ02LkSSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.40a34e35.0_1620863898115_0.13022059544105868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.1be14d2c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-circular-progress":"0.22.0-canary.1be14d2c.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kqRcxg57ktjmdCrQfN/HJtsS6xS0XVvGazf3l7KZl5KSZHb5+sBqkr5Bg1Ota5oCvBUFPLN5RZH9v//ilgNP/w==","shasum":"3be2ea22dc44d142a7f485fbbbd4d45ad3fa22ef","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.1be14d2c.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWa+CRA9TVsSAnZWagAASCgP/3XugjiszOqruH2+a1+l\nQWbkH4yzb1pSSBXhIV2hUByZpOMt522XQqhcOyQ5a9t+Z1VTZ9/QYG13BVhO\nAuQ0QZs9kqBrYs4MM+GVSgBH7hd3aAHLHBS4w0OjQXtDpVwRsSZN3R++BW06\nwfz2fY5in0HyHgAhjnON4C7PV0U7JLy4P36SkhPVIpUIUNmmoH4Fvgl2m6hd\nm/jKWQVVsijqVCkoPvuI0LdUH91DP4/HMxTZ3P92aRY/T8DxTqQ9uxYh849Q\nxusqRHRAifZPiy3th2VjRYPrSC5pQUUokw8T1Vk85uSGfeJ2kK0H+BFIL4/8\njPVtCvUGfyeLzvjmBrSULaFyvnNC7zb3zAAZW7R/CG8JIeC55h4c4Ja3647r\napqMA1PyYt3IQ/cgfmItuy5IcqhjZWZJzA1mjETkyPpFVCvCw6FOUAg5Z4zI\n6G7x0rjLUrP0XXEd6UZF/zUKlSONFfm+V3AZwTJS+Dmp8N/CEXfxRSRhEk57\nTmMa9Jf521wb8K39Su0PIAl33OybUzUCvVlRym6/q7ilOtNYRNm/DeRJrWSk\nIa34KrGU99QuSSRgzjoStucJkZSBo5dQPPTPCkf+TVSbQx6MnWe/fYum2uWC\nePF4BUKEulM9GZVLtiZWf+ekTHhefJuoxoizSOYzDzszfFAhW4+J5w4ffAJ4\nFnnu\r\n=2i5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxaXiere87TQ1/6HCoYsx3Luf+jTw0+gU2KnrGRKJvWAIgWoedwmD7bsArSw/7s+xHeWm0mq0nAOeaUby0MVWpazo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.1be14d2c.0_1620928189797_0.1208455839725111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.87dbd64f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-circular-progress":"0.22.0-canary.87dbd64f.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vYPAYxKlNK2h0QQL1UQuCreunLKcejLYxyWW1V60VfUQrxtOQ+LGMvH9mf3OItk12q9H4rzWtrL/yLfiapDupQ==","shasum":"46c7fcf59feb43131a45937e4656dbf5ccb81403","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.87dbd64f.0.tgz","fileCount":16,"unpackedSize":43027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRuCRA9TVsSAnZWagAA99cP/30yYXU9JVOiizVoR66T\n8rr36M2mYXoo56oWZOmVLyZm9ULtyYcTAskWfALNpX5wqhAf8GClvnibA4dw\nLbVc+ZAfhZRRl/7wdgRaPvVHMRFiIBtIUZuXcnl8f6BXSOcto2FZns0y73mV\nAJb33fM/5qpTFUzpgU8HWm4MlKpLPQdQP8BBWhwSqZszD4ZQLKOo9nTznbyt\neSdWtKBr2I7X/IFONv3PV2T3D34WEwEMfaBZ8FH+gfNbE5fEpzBiC1mEmx8H\ndUVU8zSXLIDc257Dr4jPeLlVW2/pxzk7VVkBV1PlszxmQ6/Rnp1Sxr6HFhbZ\nNbdgT7LQ2fOevhg8WxTLARjhamNWj7ceXfoheOP47sJtWX/JV7HiMuelbwBP\nyRTiKQVcVrJlWxWfmTq1BYytQJUT6d62WDF9LyqRgML+QjJQZpGccnMD4ouy\nkITkGS0Ehrxx6aheyaJnK8RzSia+u1iNOFWZYKuCkpAdydSjSM+fJkb0sRIS\nRReVDSPzOEy0+WZXOmF5VpSQ4CTQvluGYUbGsIkDduO23rscv0SVsiTuduTR\n+H8kktef4hgk/aolsX6+U9AASZgi8tzbnAK4XnK/C3P8ydM+RYfu6o3Q0fS1\nvqF4C8zI20T79rzhsuTcWM3RqTMYRa0t5zcUSMifvx1i5hXC64xCUDNet9SU\nKNKX\r\n=uXNS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgi8t/w+P0r8d1ta//ToCDVnN+Pdy+9uCULET6kdMgQAiBaVCs5nUyMkgBkQrDyzk3lb8gK+t59wo0yx9IvVujUrw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.87dbd64f.0_1621025902079_0.2641112180120855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.c452e4da.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-circular-progress":"0.22.0-canary.c452e4da.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NNqjXe1SL4Ozmt1CbynEUSnrziDtMnp/bEJLurfG/bNkGZ1gtRi5wXrYhnBwfzUZ8xDvaJPeRFgs8VGiptbMWA==","shasum":"9618d5219509aa61ec9edc52fa536c56e57d8975","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.c452e4da.0.tgz","fileCount":19,"unpackedSize":55364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovztCRA9TVsSAnZWagAAF80QAJ1DmqqXfNq+cx+R5kj/\nGgxhBkFrmhFowyr9IEb6Imd6j4wTicUgiSv9ui/T5W+MwX60FN41nEs+CkwQ\nejqetsafHrjmDB2OYjBFepjBnIjm0EElAb6v69Uu1dxgOx0B083NZBDJROZb\nYtsz/lJZCZ1gnNkTune2CysP0ZEgCuj8LwzyVXOSjepF0Nbh/GFwcU4uZ7Vf\nDDqg0PgZGEJcwMsEiyKONN1mKlaoQ7IVbcHYeBVmm+GXrTxbf08VKWF59k7O\nOo/ouTkxOiYpMStmtCwhrXShtsBuN+rT7HeoxeqM1u0YQyL/YgvuqAYaJV6U\nM9ZtDD++gKdnn9AbnhrjWOtk4B21QwiEPlhLTb6uqKrm35ro0/+UV4elL/nl\nRo52RsGMKW3sGeVOeeprJC28E1dki3Sujq5EET4YNO1be9WXRe/E+XICChnN\nlZDe3/cDcTyceJIhd8lwBVu7MLSo7bOrAWha2Qcts4iddy0afCOilaRpmCAD\nzsYtqOPCWrkQrayFL9jiUpsFE2yMHk58p0orhfha8qtmgKvOfi6/r3Y1n0pU\nGuP+ZUVYxY0XSdlWQzEEwIalvNtM1tuaLcOhkeG5KmgPiqDzI64MmuZX6kdu\nV0WPEcfpDyNJb0xWSb0Uqiqt4HM+5aeqPe02oAVWXJQmY0cYxfnXW4Y8RBO/\nMbhg\r\n=Pt3m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUcCLEPJ+lfUSSLqLcZmdqVq0QrlBKrflcAZ6cqlFWfAiEAiKvYA/AYUm5ngOkoyqqjR6PR9NPSiq9bamTyno393tQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.c452e4da.0_1621294317156_0.6220367843931862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.2212691a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-circular-progress":"0.22.0-canary.2212691a.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TUddpCeZrPUTf900rjOq/6wLQgB29h5sUY83OZ51RVWhC2cfATQs8IgrFNu7SIovdCGOCslUsIUXXn4nXg5dNw==","shasum":"672e8d8047a848a41447f7337f0eb0b16a1d4356","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.2212691a.0.tgz","fileCount":19,"unpackedSize":50803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHACRA9TVsSAnZWagAAgrkP/Rz+itSsTLiic1q1wqk9\nti9X035z07+JY8BLRCp/0ch37J+qlR46cotVUS3udPMCiwZZKFnSAJxTAV0w\n05h+6Ly+CBw9sTirafDWCOV0H+nyUbnv5iHuwFunEMWqYKp57ZY/KBkzLEYE\ntAikpcuPl98XVQugX1T4+L2691/oZX7oVhWoFhwfy3jMKc0LxPujukm8ku2U\nuzACsGugHHFb/cymcGaffhSNqT6a+4jVLUarExg9/rSvFgl/yIgid739VA5W\nAIC4Ya6aDJ9LGdxL1wEQlA6kFO+3AycaE9yqf22iqLpwkdr8faifz0HghftX\nCJrFePEwnSVXqa6U44j6hoyYJyrprx8jRSyD701fB937osXIPwfZMsHh5NJE\n7KybD0ER+G9viSR5W+tpjVTXvTASRhy4lcy8iJIRMeadwugc2XbsJV1EBmKx\no5CLjjxtV8GSh7bmcemS5B3Fib/DJSAYkIfPH38mnlB/XXzFohsD9MyaHfxW\nXOFZ4+3U+DqxLhsNblR9ra51rw4zMP64tYKcZYBxWEjGEE0wfPvFAKNDX+T1\n0k/ltG/CjozgVqW+/cZ9jqaRgd+6Hy44bLx9EKdkwLxRu/agVmhO52geG0wx\nyVM6Fj4xatfV4RrhPKkfY/wIfzy/DwK7ZXhLOfog0HuKoyNw3WCREj1OA5P1\nJVCJ\r\n=GnpQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtfcNbAOGR3DA00uoMdYQbet7NXoQTqjymmJU3AlsQDAiA4myB7OlSDo24szl6lHCD7myFcYao8XakmMFU3MOKDsg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.2212691a.0_1621295552421_0.7536326173328296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.f748ff2f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-circular-progress":"0.22.0-canary.f748ff2f.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bMccFjgvhc7CcN+j9g+Zce4TTnHtkVhRsW6JOigZYpvoVru+F5Bt9/99pLS0eGgTsFN5xJFUOu5vaBoCUHamww==","shasum":"f407af1bc19892957faccf59ff41fef65b4ebc4d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.f748ff2f.0.tgz","fileCount":19,"unpackedSize":50807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowi9CRA9TVsSAnZWagAAw+IP/R40rCCAILysbqzVMVit\nWPt/WuaXidbPVzksfCeQv3Q2ARQCiE49r/6IslWvdlnmNTXVFikb2aSo1npY\n9wlvwBL7ZPAlhWZHGEcxUt7Crh6mDR2KDH/oQXzNUf+a9IQpB9n7DHJBfFW4\nd0797agKW1SFyNuCwdLX0zJb2880qLAUsdS86Pj2h6tkUuYu/eAJzjYW1G0i\nj4IHOA+9XLHolKt/WTNUIyW0UtzbkkQgB52P9+TK0ou0GYenS8ED7f+sogw2\nGNNSmGtjx+9EiBF6T8iRp4J4NWTZ+Xjhhpnn+2nwYI+V9LYXyWUeDmNg/EiU\nJcw9N1rhgpmSldTRKeI534Vk11QbnURf9QDl4QaWzUFYixD3m1l2/s7Frne5\nezOgoC99owBPS22LcmLACq75/W9TqIE9xF/NEhd7wh2lqiMJ5R4yqSS4dOKy\n5IoIjvNB9M2lpAXLSlCSebrGGh/7BZK0mZmv0SlZUKLjuhJsa4R1JAKIgE5T\nkbv8PpPVPDtnDZJCrvnvdJnflHSVEMB5elhPQhwqNEXNs82jn3YHAgTwF6Fl\nHgFJTZQS3IAnvI/eaNmGy5ly0T1FmF4/RGqh7obK3QsZfq3bGEpv/2PBcnGR\nvfCGmLoJB+Dp6lEGSN6OzgqFBzy7QeeMQuK6IIr3DCm61KH4beYzck6RnZ93\n7GXW\r\n=wfDu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH886JpW37kb2ee8Ju7AtqjXsF7YujW+1fCbqRcaUYcfAiEA2MH5kkIavfaOkmay6C+2Pk6+g+7IDKW/gHKn+58PdOs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.f748ff2f.0_1621297340896_0.9810962142517408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.cc04657a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-circular-progress":"0.22.0-canary.cc04657a.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yBUzM0D6hVW4YmRuMnyT7twySTg5/vNiiloEZK6fTzEMzrPWwy8F6Fs/2msfnchYhjVNO/toZXjy0XVz2zS5uQ==","shasum":"503effe83285d037e53915ffb292bde9195045fc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.cc04657a.0.tgz","fileCount":16,"unpackedSize":37566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZ0CRA9TVsSAnZWagAAA80P/1GfEXa/yoQTrki6VFs5\ncYY8CVUyv1FSbM3/mPXwNCFGcDmXU7H1qY3Kk9RbtlINTR6zuYMootDKdO83\nQu8dQO46dM7qno8YGGGfpE0mN2fwCyxTXA6egyIMohiRoiMjzVxRBASJ3flw\n7yvnz0p/VbdZNBOB+fD/zIar9Vear1NeQf8xDBQwrNyw5FwaRJJVLeR/ScnO\nl34T2xQH9Yui3uyiSDigqfiHqzbAYO5EAR2JxHOyXKfrCTNIubC/NeRO0XII\nSxivkwrRxhQ69QCwYnaeS6yEw1nTjPIyopTztkZMaV/7CFRnxbAUCzNJhavZ\n/8WyCWLefxGwFyGAzK2hwTo7AQnMq3aExhs3TlEkO/n59qJp0UG77AsGJfgL\nM4dU3XsbdhPxueg3FdliSjjlH41aCmN1ioVFsS9BXN2lL/j/vhrdLG2wb2X+\nhk13ZxHFk5NHCIMSAG80A0gkC+Oweevu3+t0ffIDkUYkr66efrE3dAPiGuIs\ngXooJ+ap0N+fItFykB8sK7HOM6iwvb7dtYCBdvRT9lZpnK83fQVnBtsryEyK\nJeq8quuDyjOJse6j0xlM8GK6/g1nTMCS0+MhTU5CldKoDS+dQDZtlB45Qbcf\nj/AQ7PRyxrimvTPAjI5h3jpNv3+V1Sh4Ivd08GDP9hXD8m79OL2+pYxwNVYp\nO+Wn\r\n=Qkyl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3HA8DLzaHwiDV/S3Xna4EQE3j1HN3C9IvBxTZqrQR/AiBXnJWFPN8bmkhZ739pIc4dL1M2M3gyj05FJZ/LraA58A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.cc04657a.0_1621300852250_0.38521039681247826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.3a3114fa.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-circular-progress":"0.22.0-canary.3a3114fa.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-syKOLSLdxA19mLlE56RvIECYXG39g2G0y3y2Q2Gr6knOcFHA8sm7cQpnSV9vLFvkREYkJpZ8ylQ+hJto5IRmlg==","shasum":"17ca4dce1c557b8dc4f2109d2b569383e135f20e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.3a3114fa.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHYCRA9TVsSAnZWagAASGkP+gL+rWbs2W/cKgdY5ft8\nSslRw5/y8XSOhP0+CtKjFbrNWH2QpxM9CvCVe+Pqdcnf0xSLmfZNfx1VzME3\nskRDoN65t/C5m/8m+VEIfmfpkCZPUzzBjtfMxwJhM1yU/QhTIxDJBblzSmpq\nQPuZyDJgnpTrlYyx1V5Nzu7I3DjZYQ/QfhbORYgIubUw54OjgyD0OUOsGfgA\nY6DQ5eEj1HZ5v5Y3MD4P53cf8T6Y1wH0JyKnknDbM9xdmXsOlxonKZUG0Q71\n8qtQyFqiD4Zq5QncJkfahz/rFXF4mjIIiQsO+tV2aFfai2Vwk77DAtUW370X\nXgGxtUAFfQgtOgqPRqkq4/LWU1JkB5w7l8WhQlII/tHYcX6gXkc++wkJe3U+\ntg7C5i4WsQakSv3oa7TBRGgE4kAYZhyC5rpkXTBZCF8LIaon7wFM/dJLvI1a\n3HPbZAX2KfUsiTRtjzLnRr+qERUV8mGdyBzChZMmzesemF2F1Kgk6DfK/p9k\nMO1r2/hgHQPAcwtKuSad2R1OaC0dBKuJmzNpbfeuwkqlzzq2l6B9d5+sO0Uy\nzfM/3ZrgykR6mdJ0SlX7xjW541ZpZR7a072yjiJ54qcyZOQtYKeBY6r6K4AF\nZXZI6muf+beJrwRsaV7wxueQhwazxWfKzsOjlrbY2bNBmEZ38BrfRBVUbLQv\n/WV4\r\n=iSia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDayFAXCZ2EqjwLFRTOkpH7KxZm94C0dc3drNALBCmkHAIgE2Tpny1iCcyFW9aMkwy5gnLT6aQ/QYrZBtRmo406ZQs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.3a3114fa.0_1621467607475_0.9273679256622827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b46bdf83.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-circular-progress":"0.22.0-canary.b46bdf83.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wppZww5iAnGk/J39OxcZ6NTSwxGiy7PeCupHg36N/eV0aS4q5PEQGfs4POneiNN/Twzl7bNkxO0l6T0b4zxZTw==","shasum":"d2bc3787620dc3eaf95c8fca72ab15d86fa49b1a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b46bdf83.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcB+CRA9TVsSAnZWagAA/WgP/3grYNAbcbLAM4KkCL6U\nL4k4KkY8oBXlfn1hFu4vWosZFJhhIXH3+whNU/QklZfo2/izDCGsKbVbGQuI\n2XGzUabp7HcQknveyGHHmeLITWSq+ngJ9u/fp37Q608sdMTbmbc9TRKRjve8\nM0qwSvzDFaaUicxD1PbeoCvx/qbxnJRgmfQ/mAlVo1MyoUikMdc52wY6deFl\nGfagKmcSHLdXiqLGpxfKg7xU/3JASeH9RL/VaBcVGe30RMqWYBQ8+rstnc3/\nWBV1rP2aa5meSj4AjE54QgsKyUtMGqMvQ2jtEhvljYnBFPlWyuDmhI3Apkyf\nTBZVmiTzTiV+UutqoIthZ+yTZWgaAFuVc1ZhiC+nzf+Cibp+lPhLRic/HRRZ\nZwHEpkN2WHokwqkQ5R83sJfU7bEwGovBgLqgL7rZfpXq9PCMQ8Ef/ASWvBBM\nCudeOmWaaU2mzOJtyOMyBZwiO26/IQYjoNBFY/eX4RR1ckYQ1gsFa4593Ebc\ndS1FI6rEs4mvkcLWh9NTOmbd0dxA0760QOrLKI7XHOI5dZgPW4JjmHhNk0I8\nkRyosK8mOeELxAIwP/jaSStw8/Rao6FplEMtLeZe7ay0oUl070bzGNjAqrML\np+9LiNDlkAez260IRGNsQqv3eEobkGhUiZl0NC0xWVG5tYLStK0sofK04LAm\n+QLw\r\n=9Rzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhEnJLKVatv/DSTmWltdgDBo9GNqESh6kyVPVaaVaESAiEA/txpnL/lLyKAXjk6/YKZ9ye7ror0Rq55HXNYWSa5Hyg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b46bdf83.0_1621475453758_0.22906753847286043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b401a081.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-circular-progress":"0.22.0-canary.b401a081.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OcNW21AoMYqJumcBaX4HClXabMIT010f0kHYMHpydIweXZ/3xNd0CF8wg9+YF2l3zb0JHkB13Z5yiC0ge/lZXQ==","shasum":"4cf674b421117f770b6ed35292f4048bb0afac75","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b401a081.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDNCRA9TVsSAnZWagAACJEQAIZj7xFqVFBz+XDB7ZQ6\nPO1FmEhFpEI2yVSX33dJecSwKygr8xz37qx5OVcV4Zi/6PpVvr86A6f0y+WY\nnQRyA8BznOgXn/X3QLOoFyr48+AkcxGvQ2BGZwXujdou+kvZkBpuFV9OyZeK\nbSWqYsKPNltwugxvQc0VN5xGhlPgX7EvHq0rgWTAv9/fjTK7OvRhZkCGa7XJ\nKiOOHewPiS054fZg+rApB+tDg/w/jzix+Js+1GU+XPUKx86qH5T4Y6hO8LjK\n9b4nA++kuUH32OIIfAwR8c5sfgwWWRCQTs1ydrahVyEi8fl8BlLYRN7l2TiP\nsolAghzf79Z2w/IdCXKRi5oq2ad/mFZ/hji+VSJT7t3EenK3EZ5BhxpupGLh\nbF6Lt+wbAE0k0zbIQpBAtyBH6zCY91UkG2hZ2hBx/BnyDThUxRX06dL1FOQr\nlweOCvNnNmr70EAgbMtbiNVrQSt+n47HeVUyRAyrUnmvT8pDJOnr8iAaO8Ww\nxWdSBCppCyydLQ6B6HttGBMZwtWPr3a5hl4w6q9owl2Z7Bs6ACd4lg0mPy3R\nWK2mIQq16uz7wc64lTC0RFsNkZYuHdHiQnDyFOYN0fmxjRHRvwCwiKWy/C2U\nnMoBuMaxyMD3RmEE5s9rvZGQOBPlLyoFyGnJ7RDFI9NJtG57XzPemmjv60dM\nLqEt\r\n=Injb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX8HEsiso8K1swvHObw6A9fcatlRq2PreA7CgBvXyyFgIhAIBjjj8Svt1jaZwdTI8bK54bj6ADNUYSPYkzEphgkcx3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b401a081.0_1621639372935_0.533489873203133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.012c8dc0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-circular-progress":"0.22.0-canary.012c8dc0.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VBiOJfgh8l5CfmtPFyQXCCWUp47g2XY8XGErC6Flttq3iBPdT1WHJ/tWbVqq/D5OeZcpkm1A/7ofxSngEDnOow==","shasum":"d0e93b85ffd1fbcc2859d00ad1e103d184ff4020","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.012c8dc0.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1VCRA9TVsSAnZWagAAs3wP/2yR/Qozc9aImqE5hNvo\nGE+yYW128bv5t3RVZbmYF3UH0f6tKjZ3IBOSYKODHQ+Xg1QiwLoMCziQAZwg\nqb0CBvX8BbK5XTBzw9Ac7UHiMnBlySWFIiAbIEejn4OM901vzw7+LCTUwud5\ngib8GPLnPAqICfgDznruV7vdAAG+PqWPUql/NO3PySwZ4Vq3rvICx8NXaNQZ\na13FboTry3cA4ITNsetS3SipXCN1WXNxevGqyrhD7ZBsEaDg5brOqR6FLtty\nkVxrmmh5wPWdbwBMNgHi76yndSMNoH9kSzlqpAcwWsF1xidUVXH7AyQb4tr3\nX4YNivL2oYB8bZsnBqEjFZaRZ08gDGmgQffiLhj1JTGPODTcbVDy+XSv9RA+\ncpbz3JLR6TaIWfvF1RSK9lW3ZQcrqIXK8XExmoZuy3uu8GTCTLBG66X478iM\nxzjL73j6d4Orh4BC3XmlKMgal2uXRBtc524Gg+iGJ8XEJxEVqco35I33lVCy\n+CyO14T8IsmF8n32Q3Elp/acoPz0iiYBgR+zihTWujC1NPrlntUHDeA4vL9W\nqqcLfEV5dbmwn0rnToeLWH54RrkL5XXYS0kpRDoAK68HDj8DaQWH//OJeLva\nfdjicabIMIdYC31sQkFLZsfbZ6tC5zyjz60Pimm5uW5/ZwQpJcgyXOrK7Vzd\nft5N\r\n=qPdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI+sv36YYVzlKgXe1wTfCdupWdrr8/dfa5XxE90xiz6wIgWOv2L60z9gfGMav/aAqUOxiRS7GNXrWSozkFbcpuhhw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.012c8dc0.0_1621642581401_0.5164738542150717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.e01a1731.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-circular-progress":"0.22.0-canary.e01a1731.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eDxeu1B300NUUJNWVvy5C8kO2fu8NQm8WkzlxQgwGOSkBegmiuTgzrIZy/vspEOOKnq7ps/716+5Pj+hHgabnQ==","shasum":"7cce61041869d686ef52e78f9560621968038118","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.e01a1731.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84iCRA9TVsSAnZWagAAbdQQAKRfagemogVJ6s9bejIH\naBLBCz7sHwmdZZqVbqljV7d4OuNFgd6Gr9KRuwLAh7V/QVNx8+8DtSAOqKIP\nGEwCoeTwhC9NF1jcqdEJuTDSWYB0LHHhAdMNOHm9eT4PXB7Rdp7vXOytLcUB\njIz+XyWk+Ke4afwp6jbpdihNKO9ZdrYz9ce6LaV9NGo9bOOiZvwbZ4NJw2XC\nVLjW0RnhguwOKNtkmXC3X8BIDCkatKUpcdb/QoCl9ONr7NBLrggDBLuZW4Jv\n9Qm7WGfIBfoWOZp6WYc+csHFlSvzugxxWhKFlq3zl0U68XFoMaSeNkaEEiZj\nxnYVqhszXvuptYvIdWny5wjOrckltGmjWupcwfAn+iVZXjMpeBUH1M0Bd6vG\nqvmFzKokGkD1mspR32OLpFhPFwZ91dJhbywb6jUBfCu4W/yJc2ThNw3bcLjz\nhZFkGPkwox6uZpKf6WLxjtL7G0az5IVrZi1q3nPO+iW5TrA0y0CatzAJa6+T\no+SSd/GBVjZyFrr/BwGzQ45ipR8R7HXcsgIdDsPnqdidfwitFnDyxZagm5/r\nBZ+K/Tlax7dRtmNFJguRxV2VqKXSjylRNdSDRfO4zmWokPI3t4EBhiWdoGoS\nbLe/GfKaa/G37+XDL04KzwEme7/LtZ+oTqnM4tbbdXMApCHLo+9eb2di0VKS\nesyY\r\n=jvoc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjb6+fH/x9T9lApat3q3ng6MF863K34hZi8Q9qGXgfBAiEAyAo8kVhJcWdppvGS/JXoyvSmQVtqa8ZHLdTsAD1KtS4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.e01a1731.0_1621872161992_0.49507889379929937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.59174b9f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-circular-progress":"0.22.0-canary.59174b9f.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ReC+aISh+2HEeC54x5l2gH3BIhKzhgcDPzu1AtdEsiX0mGzAKmaP/PVpH2Jsrp5l1umdl3gC+lb6kMZA94pBEA==","shasum":"84e3b1178254c7449badb62362864a3487e3c9f2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.59174b9f.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuhCRA9TVsSAnZWagAAuGAQAIBSrFZLvmm0o8rkIwF0\nyWMnTSdf2QKKN2nvB2V99QPCtvB3nTCRQiBucxW4pD1MYVm0MP6nn8UFzEwZ\nG2z4rlkFW5zFqviL4Fbt8LxdUE+5nestevTOx4I9nE8Q8S9g5Tl1zvqAUpbh\ntLmjHGub1s5kqWHnE+xayHf3T64mSzA6rStAWkpsVk448qzS5tc50PpUexrE\nPFltVVAoCNQ6TPGQukjEJCtJGx9vwjTTGYB2yIc6vSzslFNcQpLCksvh2Xi9\nFqLILoOEogsofu/nYdaDSQPtw2n0jPV3U3OS/CrnPmJeRkZ0g1E+vVXM/VX1\n2i/Ut7EUMkvDkegkZKwrvwIWLabmhpE9aVUDFCM5tQqDn07f5Rch7s26Yp5o\n1Zxi/lGnJkPUZRKF7SSog+epls3qwA28jOCAFeTJ8vVZTMMRCzHvYV3HXbVo\nsRtkDCY/UsqTVyoHo2MJ4ZC8tqgsUMkiFugGIH3OjPNjZ9248euDDJOqJK/j\nzeUhJkgX+aZq5T/98MN8XhN0UxVY6gRO4+L6K1+fdXWTbgmmD7c0l1hGNViS\n1Wsy2qdUEEB9cfV92pZYrvefmvloSx3P227aCvuDimEEJkpfkz1YygbWK3TK\nTFWDpEUa8QlmT96KKrOfDGZZluIxuqXrbA3ijedquvWgOTEQz+C9bMIneFUf\n/2P7\r\n=yViw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUn22cR/GtktGg+8Zo4G6vFPsSEAcUgZ80vRXIwWvnFAiEA8qzCwo+FJk7+24hdN3BfbxbyzL4fvxPYn+dLcaEFzDo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.59174b9f.0_1621965728638_0.14080585733416684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-circular-progress":"0.22.0-canary.c96cb2e0.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oJ22F4PmlRwVhCuS5GclTi6/bEBrqKOvMYpqVnrG2I85r70ZwC3AvpCYdb9MwX88J7Rrec8mRlH7HW7E66Ad5Q==","shasum":"6b72f062f26e194b98d5ee326b0bd65c3958e43b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.c96cb2e0.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwRCRA9TVsSAnZWagAAsZMP/A41FVNYtX7WRc0OUTK4\nwurIG52MVGOLoe6Gw1GdQdX2pLmm7KLiZmhY/cZQ3MKI7je9C6jCNRMytEGk\ncXMSw2fHbr/fG9rX5owVNWghL0IbapkdYZHvIwBEG3N7K6m/nAqGQsYZXH4M\n54LjBgejjotiP0X7cJXbqBYa8OHC4E86fjPYD7dU9QaTsoDgnZsEszNHPaK4\nOvMyW5d6MZpEDDeA8367piCgmi6+3u9eSDg7qKW6xVs84RLpal/S20AFUAv9\nxz6NFbfIdmgQ22Myt1NwKdx9Rh6nZlvKrYIVzrxhdImZAKpFGeAuay0wyv6J\nLJ6QYqVLI9oa1PrIMxasbcarenZ97XSi819vSqNmHESWfhiRQxRMw/HLOENr\nreIK9G38ROD3bAO1lk9n2Rx9Mq7wWceAIG883hnoxzF3zZOHCxJfrR1LUf8C\nePt/oxkI2sgiNxJPTlqtts7t+WqrceeftzOyvUuZUkS3k0/DUUPRIr7MJ34m\nlbFcrUv24qkIXWfIiQ6Gtw6BQVf6C2dnT3SeHb8GqnBiWPIYY2NwAGtOi9Pc\n/Y09zKmGEO1pCuVlxOe3TCBX9UaVXIa3bv7BLWiTliRqTefuE1CL3XydqCNq\nGLDatbQhdkY0iNIEjMQYJE1UpdY0BFDQOR/xAdlkVMrc62321bpRZduhx41Y\ntP9p\r\n=Zd7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkSNBccsEr26aGokHy3NHVQezD/XnQbtIFF6k/K4h7FAiEAjPhHhqaxgSKk9RMWaYqMIPAOmsimZX8fmPivnY2LXrs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.c96cb2e0.0_1621969936994_0.9667700218090189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b9b0e330.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-circular-progress":"0.22.0-canary.b9b0e330.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LC0No3/l4bPZBwzUF6fQKSBPjXCg/BheXJWQjz6cgG3K6TJBRLypNn/MT/tyid3viZ+MAsLAmx3IIQt1vD56Ww==","shasum":"c22a19da1a0650a15179467439406c8f43706aa7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b9b0e330.0.tgz","fileCount":16,"unpackedSize":37594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVkCRA9TVsSAnZWagAAQt8QAKEi0HvnTP3DZvLiZGzl\nUKxriRXS+wQh+/cM21azJUlf/gPqRRYD2oXv2HAtd5gk6G7/mq3pYYWTRlF2\nFvn0KSn1uKFS29T8TKXtCh3R+fit47r0kz0a+Q1lKYA+T5V+K3HFdcE1rVLJ\nrO5ciWBlBPWOheT/BfyglUGU430+2z+aIxXFDQYSg707EKS8t9fT9PAJk90j\n6RTRSZiSjNRQ04ZUU2IDnpJa2DRMEAP0+jZ61TiUhAuo7awKJF0/sNoEKVuG\nBmlGDsePoi0c96T3AtKxMBBrybFOzqHdeU2/ZkV751AUThFP4akwmzXzhM5Z\nOv7RRh5AOmjJb+tWtTBVVe4I8fbO6I0pwv1eHutN8q1NZyHBYloAtIiSMxiw\nGivTriaVpIMYHfuzxNYOlJyDLX8Y/kJFe1i8hgE4ytPwrj5Uuqg4npafMkCJ\nWdtyez3LAOZ0e+D+wgPTyiwj447EmO9UYt1WqkHI/+ufmNAhQYxpuZXeiteA\noXQyRo+gxWqcclTuLuZYdsVa6hZHaervgaDeOxy/rny26tM9Q+2vl2IUlBpE\nj2cv2GURLjah+VP3oTXgFbi2vFRCHKF3Lh4KPHSlOt/yP5rtqkdO9Tyn7U7u\nT3kgzYsl6mfkUnk5bb9alvp3WIZrQuHKZ6bs9uYNla341MfFeFj937WSEqyB\n22ZK\r\n=/nHF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt7T06d9yuJO8ZYd8xXr0l1SPvSL91ORLhjxzIDNLBtAIgZWYDvjZx7qkQ1WD5+jh49haDSFW3fAcEpwd+NYq/AA4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b9b0e330.0_1621976420516_0.23248672039444984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.ea2a8063.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-circular-progress":"0.22.0-canary.ea2a8063.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iJmD5+U9+aibYLDFdRs+pYU7unqdAI6xP2ibScQY+6sXCxILOwdo1s5BBkjJIyKOyyQ8XO/BE9I6fuls4maq5Q==","shasum":"23962efb2ccd8eb16992de84b4ca01d48247f011","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.ea2a8063.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWaQCRA9TVsSAnZWagAAJcsP/igWzv0em9/AUydCevyW\nSwweuEfSniN8H4n4gSGPTBzqGGC1jWppDOpLwBNAK+siFSfkkVzulhef1NDK\n2vGrezKBCFd4U2qaXvJ/WD9RfxT87A2py7ZNXN6WaDaV49Hn1Z0cvH9AVZL3\nSm7To4DTOGRAG02xEQ9t/lOdhgYWiww/K6Xd+tUfI7Sc2T/pXuVmx/LZjHYp\n/niRuGPy+eegiBJBEi805udsyLQECBI6940Kqe4Z9vRX1flN7X9zn1rvKvCJ\ndmmtfI6bisXQfg1ocAvN9H0B0dM/eMYLupPxtK4c8esnAUha4B8AYs32mDCQ\npV8jFnjGY5aw/hDKouqHN9ufRE+H0uN8zMYU+rwQfTmECU0H6KoI6oaUjGiK\n0/aA6kONQ0AKQSdOEwtabAuRSnNJKWDP5ENeFe0+Fe6Ckxn+4wYRRyfsJfmQ\nuj5KXPs6I53P36m/DJNlqGs85ztBqgVPvpMZasM4rd0VoONjA3Oof8N8iFx4\nXluwAbkFsM2H4Wjy9loESSocu12KtVF7qwe91NTE9wPn6LWSRWKN7iCeAQov\nEoBILF3FfxjYhf5q7Urj63hxcQ6zz2S/7ztn8bvcz24oiXfzfiOOdtpqueoX\n4JeproICMdX7N9jD1PPx6viRzCIHbVFYwV6jD5mc5r6HiyWBch+fttctTaWi\n1kx7\r\n=zsP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD65JJS1aUjC2+v79bKgNjzgydJ3SZDFGsgClTy20lg6gIhAKJUYatbX70A6/MLqtp1o6EJhQrXTC29KS/uk6ySE3/P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.ea2a8063.0_1621976720486_0.48690428826769816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.60cd9178.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-circular-progress":"0.22.0-canary.60cd9178.0","@material/theme":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dGz8rJxq6t37go81tKnYyRMzAclCj1pCJ6SEhS9aP/d7lszaMCQF3PwCMsGriEsYotmOG5E67Jq3UEaN6bgj1Q==","shasum":"d667f64494677ce3a18ed4337f7b59090e5669cb","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.60cd9178.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYS3CRA9TVsSAnZWagAAsCsP/jcBxnDV1MA37ZQPxtD1\ndTDQMto/aegAI5YDAFH2UlzN38ZLcZv23dp9DONtqGRHm6mTZP/WNSXxVjA6\n6mv4Sovv9oEhZg2G+29NVyDpMkFqa8qymyA5170HWH4MqzgcHuXLd35xGBb5\nD3cMOkAtrWxrvAfH6NAVlEmWPdwjSn7MdQe+VyqwaBoYEwX8ZGrTp7dm0g9i\nRdcUsUzwcaBSNA52sneNlnldDw7hiH1wu6nEunLS3+Gbb7u+z1koxp9O1cDu\nkS291j6K/nuEaUafDBNbJ1newRf33bEgJOPuIEuJ0EQXHJ82gffbKB6zTUxF\nNqeqf4Z46SjnX4+VwIt+rcyIl4S+2rtI+oZZxAe24xMqNvvIinntdqSEXO2I\n4AeGYGMUd85WtX/mPZeBphKl4mBloHTUFqdw5Laev1L06mGAY0nT1XucxmfQ\nPAEzazeCHDMfxC0Qi2u6yactQHlPmKaUoaahPRyEVSONa+2KtPzftPymZyaB\naTj9v9bOoXBaWSfTWG8d+geXR9WcH3fZTJp5aHklVRzCFBUAW382nRy48sKc\nT3vAQl96B24Xw1RwHvv/BkNoh/60ALZgIid68Y8i241Xe5x13SUb/a7BTVBF\nXNuQH5VHcWtMDvpwYY22NxE7q6MIYNZJjQCwYXX47gAKO0nzpOUM7iso0B63\n4wzL\r\n=HvEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZCC8IIO9j2PH5mnykTY4sbXHEuwCsxHisAPPFgVpMbAiEAv/7qIpUu0o0idVS4P1fykbTwmd5Jmrqax0TgP4ZokGs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.60cd9178.0_1621984439064_0.6018482310777982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-circular-progress":"0.22.0-canary.2e2c75f2.0","@material/theme":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0ZU7K1W153uuXMyP4o5JJmgzMjvw6UR4JW/TcMBXkWCNvCOKvv5TuP1RULDHTb2EnGzyYnVoPn/5Wrn93rprIw==","shasum":"2b9b0c7312bbd6114245b26688095d499e04149c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.2e2c75f2.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZISCRA9TVsSAnZWagAAwrMP/2s380QlvJTtoux1LZzj\nUQkQf5HJK3UcMw+dbDafc1or90PROqWQ1nZS2N2t0A5UkiNvCdWEKOjguMgM\nGDh2kW91iP/o+/VMbs/RHiwY+qoQgBTFnoAtz0M7WkRID5z4GEV9T6qhzTyM\nTVUxU3qtDiKY6t+AS9Uces6V3MKxXLr2DBRDBPWuphTDP8yDi1eoSJ09pPlZ\ncx2YXeNJmsTU+RAbjvvU6yyYWTS7ubBWnRdcth/9JoNPcTJ0EYFL7/qetuI+\nQzl90ylsfXOfxMVjECQ5RzzZw4b0hzoMBoNbc+xHU8vmXQ1dXtZDdvJd1eKD\n6TvrhF0pC4SVUwwhxPph5GsF0BM4GvyQv/jDJyES0xfl9XaXfKdEf5KrHMw5\ne57t5Cg3OUVIBsEOU6WpLL24VMDLqxqYM0V9HTInLxhqrIbKkxC8cP0ssMYb\nsBBm52gYGRLG3l1gO7fgToNwd5HNP9z4db/myNXDxf0IsNgl1KRiJ0YH26+8\nn2x5Ll3KE+gPXRHjvcS/0GD5xTUXO+hdliaDBGWjgVl60Jm/MY1kvmEH5dB2\n2L6wH6uKOB4NRxaZ6sCo9OfAhqPxpjvhp5yAUYtLxcAbyzdcNIpOFENBEfDK\n9h4b8wbSRFwA+KUhVpNSAeGR6QWTfZODLyu5qR+OibVu6G++wy6fOPgbF0e4\nlgzn\r\n=qHxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmFh1UuzUXqF25FGLaL38S+3sDiUOJu6x3DH4HJeXjZQIgS5sjsogDhTJjMKh+fueRDLT5ROD7FIzwkwzK9eTCsLM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.2e2c75f2.0_1621987858261_0.56778258473253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b99c77d5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-circular-progress":"0.22.0-canary.b99c77d5.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OL84oyGokBOxAWSha6a4ERCDJpj1bic6gB7ASxRtF0srGNbAFaVNdUAiGeMlM8TPGmaxlBQp1qbQ5ZLVdcK1Vg==","shasum":"026680f2cc670332da009ff2a7694c645d3b6e73","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b99c77d5.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3MCRA9TVsSAnZWagAAZpQP/1Ul7uSegmFRsfnKMYRd\nAOCw/Vb9/NqVStfdsIL/s5cI1FlG+JwxWJ+gg3NS4ARXLGrgmXgaRQ9zWmFN\n+bsTy152yXHblNv40PwA/VsyayP4UXhCV4X23dGg2oumTez/pc/u16CvutKM\nvCOH8XDPn3WpiJ97QdV/dOHFDtyna/ad8qS/dgX7wTJHQa9zlN968PM2y8eh\nkNZqbBiEHi0Uaa6Rrbmmko+MeNPHBBCQQfyZ4cgHt0eOC/YuO3B1PFMntepn\na+Rmx+uP5drwrT0C/M/uZTDueS3iaTVapy6gYQB3XCEHdeC+Q3peJU3nTOdS\njCWoKEyRlxAMkJkmEOR9mpFGh3ciLdMzZjyws0+2aH1EdxDjjjp+vILPaD2D\nRJJHdsFynXGPW3GVN/f6wsdiRQAp8kHX1IYXiX7TQyE8Jn3tZo+P2ImnQocc\nyyPq7dJtCbOG04hiz94kFO/in+3Kva93LECbiYMowzwToGymcRwFvWRfXPee\nfhviGgr4VJ2QcPCETMrYZnnzX5TFgv2Sn0BwvwB6VGPE7jWaRdRvBxfYMSWI\nofLCK/YFlQPL/J1F1PdZeqs7I/pf0j8xkYFR76iU4VgA43urqW/tufRgAWjp\nSNg3axG3dAUWUd/ZqhOw5Tu6Wb+Ed46ntH1vB9Vd3yCl5w+jHk7lp551efHq\nNqaq\r\n=m3cP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTVEkLhYsSK+5Wg+UnvYe73mwHSQo/s3/WIx86oIBRFwIgGXDXidMDU2kwKmFqNUXzpLeJS0Hh1my0Am3JG23RmRA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b99c77d5.0_1622056396020_0.41603637130798643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.0de82c12.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-circular-progress":"0.22.0-canary.0de82c12.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fxvkh7I9j88qhVMpf2NmyeGx8xqX9IyrdDOIwFDSrlMLj1flpO5DIeUW3wZrXdzHlBtXxlO8cmDAjbFzGzHQMA==","shasum":"3eea411a8bc6bcea517c34ca9be1f065231ee63e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.0de82c12.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4XCRA9TVsSAnZWagAAtd4P/AvUCM7+vG8fY3dMSacw\nyphFMIYlfCSiUK4Cm06w5jABzkeJWtgb1UplluXgiqtN/p51OaCZsFfLgk6t\nv862ZxmJLY2BEACT6JDPVxdMQk8plu2yqJfy4UdjkBWrZzQWMvMraBe26jLS\nkr3HZ3AuhO6VbEGBZx6Ogi2OVtxhyQm5FQl7OL20EqAIyWacfLL0FboKSq+R\ngN/yOGutTml27RMPV54s1z+pGm2NqCY7FLwC8cFYvA5uPBT8HPEb5UCKiZna\n8r6f3ISNpjB5XaM6zDxdAeeAnfmifpDOi1+ZjIbJVi5OnhBDg6A9ThsWbzQ/\nDvexZ58nHZSStuIdJ7Ml8TJQbvX3OI3KprZBXVWRCZdds49ZJkn/+isFPEJG\nHc4pcXRaMhKQvx2zsnjGm/7h8VR1sBRGPAmyvhri8p34y93b/KIuRwoQ3VmF\nzfELwBX3CafprGeeSftu4hRCukDrUx2uUJuZ5i+2LmDGquM8XQfO8SlmS5Pq\nD66uKtr6HWYVNIM5kt8ZaYr2ZRQFe5Ftehl8pjPYYeUvWS8qDKqC/j6IaE2P\nITqZNIfoXkEPlWRZAi3ia3+PQ3HFlh1tl9YD5ZA7F5yRCKftyEpU7aYBpIIX\ne9OFp0GziRyHK0HsW6wj9/dclscKRhAhnIwaz3w4PAnhLnfrnkI/iWxGKBKD\na+Iq\r\n=cc7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN7Ag9fbUH92VTC2ifFzIN3yOIENdgjP4O282RS7Q/XAIgO8dCIY3MsyxRt02/3JJNxBVN7o5CgE3uPv8qiCxBUVc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.0de82c12.0_1622064663484_0.5979613285052789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.227a4614.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-circular-progress":"0.22.0-canary.227a4614.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4EA8b/iJ8grP4x/a4yqnRkEEFzoFRX7I2J6BSsQRXy1ujQAZzKao44LvVSNYvC0v+RuPbu239JVJD4nq1dOhRg==","shasum":"0fc159496b2a500ed40993636a69340f785adf16","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.227a4614.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8K8CRA9TVsSAnZWagAArEsP/i4Qw98WJ/+L8xIZHBYz\nfqIxzMviN+GvS/+vjsLgwz5eiO2puCXkI+0PJjfD3b6DrIN4JfgpWVaVi0eN\nNVYEGjvG7ZC3BV7vmaD27diZi1nW9a8egzwhcWIngvoPrXRW7hnJhbWHAv6L\nUGoOx5SNv19dlhFMMvCzC8t2foZZl66UdVOV32UIP3uagVUdevMQ+YS+s0l5\n2k9Rh4JDt+GwZubHK3p+Aud1fQrL+xscs2Uwm6qB5IICIXjdB8uHg+YinvyA\nI2VvKQqlxdNU5aF5aTymOM5AEMjai602OKGmf8xGKYvjXRU2DLL62lt4/uT9\ngNFeMg8Exrc2Mp9uK71ZzyVFQ2X60F1N9/YOitnOuk16XOtKOZfRWSasXy/f\na5qT8ihtrjr6bWRpxwqv0nbH/LIDOWblIoBzIb/+FlByf9rVpsbn6EaX3M0T\ntx9E6oAWQpcw8cZeL0/zOXeyRpckZRQgNtjKkjFHWXB0RA+1IMzuL7dRCW3W\nSK2zzrQ734w8Xasp5U/Vlg8SGYr1V0lieeF3v7up/CoMlpSxEMHIk+5mRtT/\n2/rPcm/OMlefw5M57GbEEUJkdYpZQWYeu6y+rOtUV7sxjXFbZlePMmNna3Vd\ns2sjFinPlqiF6RKfFvUpx28Hsjetik2+ofoVju7+TepmFbkR8DgDFCYC4F+U\nAen9\r\n=wpfR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvfp74rq+66tfg7pAOWrAvp4X5R4TSwvmedhO9Weyc6wIhANww0mG7+gm3mY420po1TA1ygWuGYjOEQdKU3bdvpntu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.227a4614.0_1622131388403_0.6558892662769045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b3d21d31.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-circular-progress":"0.22.0-canary.b3d21d31.0","@material/theme":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RT4suW7Dii112oDq+6xbPNSy7Sd+MlXLzmPVrAJ44mD3kwzjoh9YhY/q7fzxCxIub7Qh2WhiGGuL93uYp7iGPQ==","shasum":"4add4089ce97660e6ce7459c242081b77cbda7cc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b3d21d31.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+i1CRA9TVsSAnZWagAAorwP/3mzcIXESXhRiZj2llKZ\nhLFJUt1OI9RBOx2+9ts9LgYF2JQR3gZEEDyDf4u0P5gPIk7jmrIlzwfzP7Iw\nWb6ejiw7Vk73f/AWyL1EzNbPxq46+gbpITruT6p0xGWrzjI4IrXHI8RhUDGI\n8picUuwuHGSGc49U4VsTeEryW8hRXP9n7ObydTyyCdaJ/lMyzOrwHoG1ChcC\na6vhuuGDxIxv34/PMl+F7PEz/rlD+4qRc/PnYW6inclx3nrWuYw0SYmzP8af\nzs3dEaPa/HomIae0Lz6SLNLT+kvCAChl44pnzT8YhtS0IXYywP8W56VURrPT\nhhDxD56XNhdeKxIxXxurxc+kqTJ42ntmU2sXLoXoR8tuyW85oQKJOD6loYqz\nRT53sJoKxYx5OSGkDKygOSD5Yvu1vfOqNE0bd817QN7pwrujO8PaQzbG8eJx\nZop0LtXiaSTg6XFMRO9tQ1bhBBohGrS2pScN7PPqVPJMcy2FeDbDJM7JU8B4\nOSWtFTZGA8SiZ/bx8JpiVtDL436LQzjFOpuSSHShKiUZCe8SuFHyJy4YKKa0\nE2ow+X15QSjbPq4vNG29B5RziLbEXcOd3K0+YPsZqKHzbO870CGEOFJ/w511\n8O6KBsprnAeYB7Bsc/f4h+N0V8DfzD5X/WohKY9TI3kv4A3EdbJ096kQjtu9\nqvXe\r\n=C8po\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2r8bHU0K/MRosPPuE8T3lq8ioz1uelp4mK+usD8pnyAIhALAZ2S0hfwlyg1n3VAkCjyQK/pO8rk6C+e/c6ywtzYs4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b3d21d31.0_1622141109422_0.5663915240693318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.288c33ec.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-circular-progress":"0.22.0-canary.288c33ec.0","@material/theme":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZNLgXR8xlPcnwG1lHjAcH6iHd0yHhVuizEY2K2wd7qxXTeHbxW6yp+83d1uSDUe/jgV63KtsmuthfYom0u4SzA==","shasum":"7576028d633c103652544e0e5fe8c6578be6370d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.288c33ec.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9ztCRA9TVsSAnZWagAAm+0QAI87aKBBOTNNfYLdzcfS\nl1SfT+GTiFzxsnNQARo9Ea+dMGIUM59CPhafUg+LHsQ+63lJKDEJ4SOn3QuD\nchJlZXEibklk5zWPSjEtM+ykJpJYp3IHXDqkBiG7mHtTIPyhj28U7q3mJzLQ\nGkcVsg5pzADoLqXtiEB/BE4Pe7TFinT34xE98/JzDeF1l1Tk4gwSJve22pw4\nQ4uzjQ7w+URonhyfdUJpWhGQuvaXMRRZljXk3770yhXHpWr3vCI5PUt6M5Wa\nlx1e4F+Elj8iBmdgzi6VovYg9ku+8ettMJ03iryp218PZGUzGxt5N7ASTkZK\nPvBg8ImL7nsgVcLrykO4t5FC7Rkf3kBbu5u8yuRICas+QPW7iJ5LhjNGyxjk\npji7nAs6pR8tEC7ekNnO/xbbkrZTq1B23nd5G+2FosS2Sa+HzpXD4ml4T0BP\nB4L276AoIT+jnWCz4qmH6p1dGfMCNMcaNLfaxNGmmrtuXO3HNGRQkz1Z4SRp\nlpqpaq7lr7+GU2U+qEHE4aVhiN0Ag1rGalDHIm4iFP2/IljYLQUpQJmOMh7V\nFdEcaPLFqGbXHIHGAje3v31kTVNkkFVMJtuD2g7MXSViWOQlzcHpg8ZU+2es\nCJK6wzlOPfS7s00Jdof024QE/I/AEAKuJePVuk7Znwz2RkiJkdi4P8I3YVWd\n/S/p\r\n=Xr/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3W4I8Hhg3J+hen7AOb5AmYqG4QAsEfouzuVtuRgyv6AIgMmpV0h1lLCX0ZbV/vTjNCI+fbvfbXwUX5a0ir7a1icg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.288c33ec.0_1622662380965_0.6048106302946548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-circular-progress":"0.22.0-canary.7eb7ccb0.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B3UgttLVVPE/ztEo1KVG4g15yXC0c6ZYciQv1YFLQ+nqVk8nhX0NiNP5wQv19BMnENWHEaH1UdLJkv6jAd9NKQ==","shasum":"55eede765a9a1df17b32c02ce2ef21fb39f9118d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTORCRA9TVsSAnZWagAAeBIP/3y6/esWTIO4e/JmSLox\nLc09Ja0iCGAlOLYoVyxA/XT/2IsuYy7G1fsdqRvZc895t83jLn9YdNdKNJvU\nGnobWzjJecuOPnKm7CL7Rx0QBl+pd3ztcknovJB2Yod1gbJ26gGHawSrhh99\n8+gDP3WpVlONgu8b7L/yttkBCUXtsct+TF5KAYDxsSyVkX9QBsu4cvAbtgnM\ngxWM2Rkpx8ZhCFNLQDasPzlIEkRVblXoO7G4xivNwGB0VZE7CLunqx59KnV3\nUvB4b5+F0iCcREtCcTsuyqM1XQgNzeDQhM7tryv0rOBlys+//BVE1VYS+auK\nxbHN5EeDcwhhVuSXBKWehJgu2lk0TazOOHEqla6yplNbnMT6Qcsqksu3o3MR\nR5tGVeJJB25PKEW/PmmcwYhJPp4LHlReWDii0Tm0CAWXoqQ3b8dwFhG8WvTW\n18xfI4E0mjYJ1pJYqqveoPZ229SjN1BFid/f19He1XNRKAB9NQqm363ZDMEv\nAIt60aIyYz/5Uud1FMRHLlKwvcX3IT9jJjU5tVwjLTGL60Pli5xQ+0eR5pFN\nK0Aul78c9NCDEI+9MKEh45x6lye5ohukPR9BZn1Zv/oqJor5a67LUPVpsOf/\nsQ9ZMuSU9JSYgrOMmFkOj1zVetNQ8/dHVaF85C0Rd+42AO9MAJ4OqI77tPaB\nSGQt\r\n=dOfj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOBf0qpMfARL49jvmwvpgGGMgwPiyN5XbZzefIkYIEEgIgYm/P+gN1gVbiKzdJa3yOd1NG7+2JQzS99hIz9OTbMr4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.7eb7ccb0.0_1622750097265_0.787732865923213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.7fcc0726.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-circular-progress":"0.22.0-canary.7fcc0726.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qZ/Eafz7aGPMl6PlePIKJl2V2ld4GIs9izH4ZAsqqO7VuteJ07/uWRu3hpMy/FyOvqfcnZZibDyzqV8lNPcRvA==","shasum":"77271baccb268a19275f32d50ffe853c1c6c9b14","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.7fcc0726.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2kCRA9TVsSAnZWagAAkukQAKROVMOrmig5osPPVWVj\nWCRL74nmi/ja3cfLFogpiJVlARukhXZAAEOTfYmMf5862cvUqg/Cvfh1FXA1\n8CYiDoEzSpnJDbdFNm6m6sU0rQRsP6rr2CcrKBlt/T5pQI1A6U5gQnr6E3Vq\n4G5adjD37s5x2JyHISzbXXgY+EVXHbozka7MgEJpSGgOL4/kYXNrCoAvFpT5\nBlBq11sVfWBz63rOp8jdmwsKYMWyznkNn1VXP02GJp2sX0ExKCaYej9L7UiI\nlQ6HQcS8EIco/2DXHsepCEJos6J5VeLiR1NKhM/V7vyupnymCiNP7Icf2LuC\nuFPGaF9iIMkKRCtiiHkDk/kQjmTzm01TRpU4AzgCWGhpZUL2SZBKHLBukvfM\ncqFFsppt8icdH06jnYPJ/WUGhXDGRkrug0nzW/5Q1YY+7IccvpzGSm8DhPK9\nCkn7/a5YydGc7qBpdVd5UEO+6NAPyiKsvyUVPcWuI9modsUxqCLZcZrTYLOS\nqjiiBzuOnnc8BFCDIO61qMhwFneXDga1anVyEHm6Bb1mRkTmRXosHkhf8Cqe\nTD7iLqhf54otvJajw18Eli3TXAXQRXBYJFzveoUUcT4G8L/EDR0SE7CRXcUl\nQNZpYhU2o0AIHVDt9ZCbYLnFkhnNojvNsn4VFGWjgmQIZAVNyQpjh/vVvip0\nf5y6\r\n=+yQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHPWscb1yA8Aa5LdgTQXl7OTGPDSkU+tAAxa+v84AVXQIhANLL3KhBrXfago9FaqwmKG/GYZkSw033cFVJ0rJqrLhU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.7fcc0726.0_1623113124049_0.4254380170158141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.220a4e5e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-circular-progress":"0.22.0-canary.220a4e5e.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CSjj/A0zgKQjwYGNwenZF378NbtxHbZL3E7jn8OWO1VVIcreZ0Oh7a3PjiepoCeEKIUnCTs0LYFV+JoWqGnZgA==","shasum":"032b32350034e87b2dbd46651276bfed24f025cf","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.220a4e5e.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63MCRA9TVsSAnZWagAANDAP/2WeXLaWKDgch7kId5/2\nAsG8yFOMVYy2c1k2/b5McPvayNXyNw5i+tKVLO0L4l8KEiaK+POzXGayDGlV\nz1bFt4UCfGQ2oJiQ9lgUwNaAZvQv6AmqbsQO+NjUVDsX8Kc4gpZ1ep26oPvU\nk1+/gE4SxRYla9i0tH2Vby609AF8l6MRKfd6XGEBfJgkBE8Lu7j9+I8IDXuc\nJyd6fL0cg2aaSGKBF2kwJgSBgDV0CQVm1auDfQ2Y39UPfGU5rYHKH45ejaTu\n+5dzDDtYfYf2PhLZqQANxFleQXHY63I1Js3JG862yvHXTljRnTnPv2UXYuuY\nD5YaVR+nNfTHJVSZucq5YXYcb8bUbVYLe1OmdeT1m1kIfuIDEwREXDLOCUfF\n0ynVe4yRdg9xaLEtrI84ilncPzFmWRjJj+ZpZ8ftooBRODYl7SoN9ieS1KPe\nWzoKhY/aRQ0RHev4l2pMbEcLYwOnjEVV7VlQXY8oFQV/owGFc5FVlx/eDFpZ\nSZKmZJrmhZhZ/24CcSYzHG8i4fX3RT3iVIyV4Z88fo2kIF6Y2qBXFggFow+B\njfwz6IaesesB6avL/2+IbpLn+Z9OqK2c3889wrC/NHFejKUwjAMNJBXnOlxr\nViDZ27S2l5tryTaygcfMYym++XKbiIH/+heEyqdHKFTJ1g0Fwy6r/xGWtIdR\nDWrF\r\n=8ScR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0yteBPmYrlaWOvlJOzPTHAftdPuuwbFpVFv7MN1ODFAiA5H0RHYCQRuuYWun/eM4W+Eq1yH7mv2u4FkqQCNDW48Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.220a4e5e.0_1623174604374_0.2120023438228924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-circular-progress":"0.22.0-canary.6b2d6ab0.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-70XOk4O++n50WxeWPW5noGuJchlWGbXqpWsSjYpxqE8S80HXc99Fq8IemFwEdKHFKmoE4AsK2CJYgem5GXKoag==","shasum":"fde76840b0765c515ad8d110abfea23b5ef01fb4","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7ivCRA9TVsSAnZWagAAr0sP/irsSGEvs+h+j8Ezwvw6\naCv7c/Gs6dcUQDB5dEaApLy9b5xBSmdqZtz3TIADGo16Tr+ySCLLQH4hqG6K\ndNyd3eIK89IwpyQGdiSkKcJ1voGtVOjO5FT4u11ihKMLqSPN0QDa0pKmZr9n\nsk/lDAfDPeoeUAOy/5+Xy2SXVUR8lvf+ClCEQSnvuXFdZCjiBVk+E5Crp77s\nyQA9BbLIzH0wF6U1V2/TfYg1Q2y+EqmYVitepLiPtNUUVXrcf6+CO8ABQd77\nu2keHKRcXPtH16ZKhaaXT6S3zaw8IFCuakQbH5C14/oOZTFjQIPb2rVbTwij\nUEdsEM+KiZnnvr4C53HAcIVIXiVOUzqr6hq2uQCFZxAfFHUR1pKXwUXtc/5h\n/PIdP4/sVWits7IDcCCqh9TVS+yTPMFghWbG5XnKmInrfJKbtHVkJD89qvJ3\nPWvWcr5rCNjiAJXZCbgh0QPYCKR/GMmwS2xcGAlPdOfcbqe9XLoWnqlESE/L\n5iECRFgv9osIk0zz/W63dgCw/8Sci9/j71Hrnb+r6XeZY3reCvO0kyYTOBac\n2LmO97otvqll4wBxZZp91+wobiCy1gtqv1TDqh9JY1gizE2qSLwHPXW05sg4\nxL2OnNirqGkBEOW61r5owJiEEZpUmhQAP29KvIdqhH32r5IxklS08196tw6K\nLYvd\r\n=JoQO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHltcru5uN6P9cJh75R/1P2C+F8AEDIF410wq1v99x4PAiEA0IesZJlnVRf/2ZY+7GaVzIMUJ0qDqCgJH+A3Ght+Sro="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.6b2d6ab0.0_1623177390974_0.24226572895449427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.2b20825e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-circular-progress":"0.22.0-canary.2b20825e.0","@material/theme":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gyrbAZln1FZHXdX/k9oEHu1eBs3dmuOrRZWTK4+BQTTot2fc9z93Me4WUpocyFR6U//HMQJyFpatSA6C4vXglg==","shasum":"1523a76114d5e079822a1691b8b5cd316dba5be3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.2b20825e.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZrCRA9TVsSAnZWagAAcJAP/3pr+hRqUE7J0irDYSms\nxIxqdMbP0udMpjF/+YriIemxsF5bS3aBOQ6EjLuGswF1r5g1dgb0WlH9gjCT\nxYrK/d+4lg+EK0mvKXyOhIteKeznuX3zm8c3sQPdo/PW/v/prA4/E79hSOi1\nj9FSiVw3fTBNSK1R4Vyg9ak9e9puJSi/1DsD3JLAZVX0FHoQ6pPiVwXtLUfv\n6OVHMiSvA5l1X80s9IqnMyBTCLUHT/GUUxGxxm1Y8X8vJzXMtXrB/4mQhDWl\nT37vzcKIlGM2PlrJKJvSN6BtgjnZG69e1kdH5bMlQtf9b8eixA7EwyQ2HvaL\ndVSbGqM3bcCU5nOTUMPwT4HEh4wBAX1DdzUzGXBQOpZk7sr3kfDDJu9botfu\nGtxrufppxW/phIYFqgx7LdU2jaN1yKkuoJZkJTHp58ZC1GV4SNa3aevz8Q1H\nusmRN3sovdG7suWXXbKID4d+Xkk6qUAhW/JjeN03430xzwzxu7md72nFYjjU\nlAnHIzbHrLf4lQk4O/6jqx3cBcfRW7b3pOD3KolS5QF6izFx5JrD/6DgOmrm\n/BFjECaHQmHAYUpM7sPebgtgTr320LoTu80/s82KHsgjU6LohTmM5912wQzT\nBGIzZM3cb4M5KjhDlzRvHrQnS9VmbO7OlH/r01DAo63uD94/OI3wW2036GPC\nnRTL\r\n=NfPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETrUemjrn5ihe5As86tpEVP8IQ4XhPyAlpav0hBFxqJAiABkuGGyJZgAT4xU8QQ1UZbkTgTFQ1HirTNltmtbx1cTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.2b20825e.0_1623455339297_0.18773645690051777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.e1511867.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-circular-progress":"0.22.0-canary.e1511867.0","@material/theme":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KhOZ8dSr8EX/SIauzMyPep8/XMmYYq8mCMhzCtuYBpw2ZWADAKSOeGOs3SJXeE1lDVQBerJLOabxuXC00ZnsWw==","shasum":"4413b5d00377917ad6f932d688da604242f1981d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.e1511867.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZqCRA9TVsSAnZWagAA/T0QAKB3bDImjyk1+OA4jO7Q\nJb+BX3cT5gH0Uix/3/AYz4km+lWdCzZIKPHSmHCuQ9xgfHRqrnzMikZ8Pnlh\ngZUJmNgYfG1qpzdtvdodUiMrfKSLnAHj6tpHWan9iLtlCoOA9eGoM9jqIUpv\nvLBaZeDEXFHD2O4tXQkkCSPVV+hdQCR29NDJnBxiej3bb3EPCxso1zDZGKBt\n8KAMRSgECfZw9qvkQRk76GCr57o7HGDx4kFbod8BjIpMPpB0AzAYmbqRF/7S\nQe37bcWZkR2KmM/4+dm3wccyhwRo5Gt5FdCgGyh698W6aJtdL0U051ctUhyY\n008HCiswEcJET+veLPz32wR88qY7HLsBf3WzNX4pNk3YUoGm7hTaK7dSqMD1\n+gJq6smVJdydJWXrjsV9bJyGa+CohimzoX/OB0k9zkM+XjeRyl0+UwZCE/qq\nSSxo8+Z5YAVghSKgMai50OeZQXC072JxOuAR665OGxWdLQf3OeReUnFNLENk\nFqXeXD4SAF6HB9t5oK1CF7O2WTmlbGQ4k+VU1L+LKr62DOwgfp2Y7E3I8gqh\n5mZ7o1VKG0PCt3u+9G25FtK9uuUULp+Geo7kncwRoykaxmcooUJDLSinCGpW\nrZ73CQnbWBSfurQWbbP7iSWg0p/CpRMV5hF4ZmIfZpf6t1x3AR9a+rhgNTEb\nk355\r\n=3LFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGAUoqBdjeNt3M3ZXmmtLPcMjC/16piHDEdCJTepkWDAIgaGqECshHpYp5gDQNOKDTrx0YbV2Ltp5g+U++tEfpMPQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.e1511867.0_1623459434474_0.776557760904719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-circular-progress":"0.22.0-canary.ef4a0c0d.0","@material/theme":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lCup2LWBb0sSLfwOiPTyM+6nUpXRusWfiWMj9GXvHGFB/hPFjYiEyRyaqkl0Ctm5yXdbNoy/HTFDnTBsij3g6A==","shasum":"6e323323427a209c2469d47527df80429f2908dd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTSCRA9TVsSAnZWagAAmfEP/ivXhvlVolRhITPyDh4w\nsh1OK4HRUQd/dK8OEdByVmysyhYHbiOotXMY+Rd7mpNiyqxSPoLEiZtnJOSS\nhBtOGUVyK/eS7ycjlJQ66VbwYtM5AQLrE1C8AExav/RrJnXesWLssIitj4oL\n8qo4QrdR5SvMGAoft/oKajKDd/0/NKZe/DX+XY2q/9I/4400TS17KqzfKpgF\nRonxfSvss+AHju7iXgsMgM8PGJqzfVJUVwQXb+LT4qC51ZUKne+eofoOnUKh\nvHOoHZQ0vQsI+YmREsFk7oWw6t8aZCTFqF8vrTUK1CWWvuTAjsI4EWZwvXj8\nrcA1kx0fcwpyLmZUKDzjbg8o3mHiCvPzM7tqRm82FSdbEvafz3v/RWwJMCjS\nFh2moZlk0sUvbUultpqBpdcfTAaib0V3SRPqHhxhd8/F8pmsCUXycsEVZPhA\nRMu2r0DEue0r4LWeVF1Ir/YEVkL52H/wu4ApR6a7iXbo5AQcPlQIjJ54i+zd\nfHV3sFzDP7ova/KszOTKaVX+BbDB4QjUVdR3YaZLrtY6b7fksu3SSzc8HY0N\ng1NPBftUkmNW71g4mC+ms+M4X0f+WTg6ZXAMwmG/BRb20iFU8vsbVLFfgsAp\nJXGE7CXXGJ8u0Xx+PkXyq80cLHrZCcftlGnjCo3V8+7d0odwpb9cyK2fv+bW\nxHOM\r\n=pMXS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6Qd2OC6sa2L42ipZh0lZsG71ruJgWt/KwF5ZWLxtHiQIgfvWb1kyqrErZOpd4aIH7e6J4Q5a9quy5Sy7oSWhMTsw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.ef4a0c0d.0_1623786706154_0.059137663903926274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.573d8913.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-circular-progress":"0.22.0-canary.573d8913.0","@material/theme":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-872oet8X5AGRzkawpch65+HVoKprcB5r8MQBM5TZDjva54g3BnHD/hZk1XYLBGef/dCZJwN/lZWP3guaXMAvrQ==","shasum":"776bbe29bfebecc2683d3291dfbc85962e7b232d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.573d8913.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSutCRA9TVsSAnZWagAAe00P/3L97nYQkYVbqXccB9oV\niA/zjEqMi8aXZ8EEGLbgI/K47DWDXYiH4xakZ7dDRJWcc6yfgMh+yETiOOCp\nkd7lfjw9uaXIzwwSJG8vB5slqeWPEI5QL9iWSl550WpKwLHZC82Ys3rZZvMz\nTOoW9RdR4LCnCVL/GDuvw5kjz6O6DT7iZU0AW6++CLaPf/qI4hbQ+SF4CMNy\nJKhmRBSOG+P3uhf+X4cQ44pFm2y/1hzTw5/CQ9Ulug3Oxe6IZvd08HQyMuhx\n/DpSCfBZL8M5MI/gkoPe8+F5oAJR+fpi9o6ljli6zlnQ17bEawF3+8le3EmM\nFQeR6EUimR1pja7aZDsywdMwpsmffpKvIg5uCoVaJX+nVl+wr+0OthlhmkV2\nlF73WUN/SSF1K4BKeS9SIiuoA0BjYtHeHmFCUeTNDwNRReibgsZ2Fzan91AO\nm/HWNO7FWmxEqWz7tFMRdPG4n1vOShooFn7KwhXUF6smHvxaGzDuyaWLkvV8\nu1wmZgrnLDJUU3l+9/PQi9fv5gGXz6DRLit39VDzY2wmuAPUyKCn7uXtmONp\nLZ7vy0nh5WLsXd6fUI3WvU9/YnOTVs/efi0EV7caGGU5/yq0aLMJVapbi9OO\nCMJPPNfk0vtj/XXtk1ALthEySJZdblM/9ycZ4RUcfNXZSUbtGRkiikHfEXpN\nLC2H\r\n=UBx4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtW+NyFg9ZFY9PXLA6959QKhcUxEmlDIh+QOYteRT/uwIgBEExf+XYZC+k7/cpMyTCkGXeyE3M1fwxhdI8IYNFvfo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.573d8913.0_1624058797096_0.026234911025408536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.21dba001.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-circular-progress":"0.22.0-canary.21dba001.0","@material/theme":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QYFQozj77QBH1ZgftaHVqIMULMUaiF5+d1MpmxCzUZN7iEUuoaHW8oDH3kM6RFyKs3Lo9WzcSYg8rLpQ3wpmLQ==","shasum":"fff47624b2d8c467f54176439bb35d0bc7709330","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.21dba001.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdPCRA9TVsSAnZWagAA9ngP/0qJG8/C23qY9xS59mOA\nFGOCF0slDfYK6suK+ml/IPe8pCbp+k8+OntJNyslv07bqEzdpS6z2qGJr7JT\n2LjUeeghkTnjfD1tti0rJhxJGn4Lb2Op3PURih4zsTjXpVGY8k1iBjldOZYH\n0Zjc1MnpLNqAvpA9S8CQi1BZUxmYr+8jzoXu8CUWXiiNiyRNq1koJKuef1Sw\njhsswZqnv+fOa9PKeCbkcQ2JYLE2aiwnEZhHnSp7EpSpL7HQoxNa6JGoMjlU\nnqmGcy5x/RteBVxCeO1iJjjolTiu5fHxbUlXucrx1UjFv1Qhi2nKC84ZYaUS\nvvPsYKbZHhaKxXPC90FDVfdrCWdLa1IZNK2rJcVRGPIIcBFThIzHBGkJaUnJ\n0FNeFqQBGKiAEYqTeqigRzgpXHjbIgwGFyNYM8Ew3YzIEA/M06y672A45NyX\nE66Vt9k4mq70y/QD+lJcgREo2kipsmYGo3q5hTZOkJ1hPB65xcPzjST1pMU/\nK4FwQ1gCe17wDgGhwsrbMaArdsMxYUgzUYqnfeF+bKARxp+RKzW7RcZdv6Fv\nqoRTjf5/In/Mf6+m1P8/QVfIPVD5GpUHghJUSD+P8bAGlRs+XKAbVBfR3ATb\nKn3+L2HlYjnct0zP2O/u7JuPRsuMkKGjTcaFt4R5GVO2hX6JZOheaKVjaHIo\nHTPZ\r\n=NNCz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtpMQ3U+rdRv/8y/YzEWbNL/QGyL5qxPvkPmHYXSFg5AIgbYMOtALz4JG8THNlxfebCOG2fuzFbK0jaXUxvVQrVF8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.21dba001.0_1624311630614_0.9764301233176516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-circular-progress":"0.22.0-canary.6f5bfd0f.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VsUhdO+Uk2G3pTPX9bme8+q+Rfbh2zAQzhZ5z/Lhh2ffqlGsZfg3cVncY6xCAktAMfOUUwa+ckReQjrZpB6d+g==","shasum":"1ae7f989162ff95470fb048bf47d64799bec4b9a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2BCRA9TVsSAnZWagAAox4P/iDw3rsgAWvLq3rhql5V\nj8TFCDUlpLTgtoI74gWGVRzx2p17ZM7ImFXIoXQF+uwhb58ABV8jq1BAJzYR\nPJEnpTVd5DMrMVpnmVlghbyHgUbXSBq4Lk77JFt5QVuX4Luk0PdpEvl+r2GK\n1zIZEs8Yr9/Zz14TfAe49iqR+tNE6cCa+77ke8VIx0G6SiJrfC7XkzsIHZ73\nIVwagct/ALRBPdpZniO7pQkqseCb4SdJORMUAJtF9AZqTMy378Gx0mYfSNlf\ntRupS6cZewtIEVrrSDSW+oStEOyqroOgTKdfRNzIyF3NRnAE2ZsOLujFVPlr\nWkdbEkHsfQ/IygvxpGcQ6yGu6cTQvipiH6RoagG1cA5/RPwCzp3h0ujb3545\n38OyfiKb5QLX7dj7gjjjCAGT/k5/T+jzRo0wBc31zjcBNjoY18xhRESM71Jp\n/JamdMxmsc+2NzVD94jgWTN/K+rwsy2g8OhCCtvg48181eSG1TNpBl+ICA+E\nAfRHBBmxkROFtuwTVUMOWiboJpMAQzPhjDG7EH5LXj9bCx47FbKB1zCclRRw\nnc2kAKfNO0xRVSvimJssmcIgJUyLftkORcZQMXk59F/ev3/iT/yCXKAWlSm5\n9V7d8s2AYs4uf3b1WpdaZnWP1FRk2RgQ8R3IQz3faTKZ3K+l93UhkDO0fqGf\nbZrT\r\n=yHBM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2qTHyFnsr98GXT+cIXA1I21ipMQEI7BCuQChMwekAaQIgC+2U8Cv+p4wuEv4sx5Upe8+k3mI436SS5/vHOvE0MxU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.6f5bfd0f.0_1624575360916_0.19554425268441156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.fd8360b4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-circular-progress":"0.22.0-canary.fd8360b4.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o7BDS4Rnvvx7prNOyvYhG1DMb49eO2DDGrHQ26Nj9wgHmwq/+wZ256/KLNfemOawqXLVBRpdChjQzNXP9P3GWw==","shasum":"b761bfdd6bd3247d944cfe4bbfdd4c62906d725b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.fd8360b4.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inOCRA9TVsSAnZWagAAPEMP/3a2TkZuXFbNgw3iQgcr\njsKVejqA1/rwSOQYA/XipaRqUIuuYVwkatD3rB56vFeEND13vwH5P25FLZPd\n3/Rmg2+LeYqzmub90J0hZJWxt6/U8qE5qNauC95z0w6cT9r3QL1IT29iUXRs\nmfqybt3vsJl/aWZxYyNlaiW34x/B+Tmwbo7a8xSCqVRRA+4siGDqKA1ffNrH\nRXJsQlja1OxGyoTMJC1Cxrevhl5zkW0Ilr+mK4Regq6109uwuhgcrSuML0yh\nvFoTwHhHpHqNB873C7z49l/FmqmMDPIsS5O0nATgnGasjb2NRZwQhcJqHblQ\nJusiK1PZdb7dzLkDvFiLwJ1SnPkDJpoVtfTjFLsDKKN16qUsLZMKQ+f+lIMS\nYKFGk5IwugGaJDSNaLeG55Gt3U3GKWI4c+0veO8p/PgX8q72zHE6ioS7AMaO\ntD5+YrAFmaq2DuWrl4gS3nLBx2r00b/5xFi/0fD/jg/PHfcpZtuWELNU7a5t\nabk/D5jEYfFmO7BLXHqhbME0XSKcqcI/EK2OGZwjKRWZxGwcJOV/lYwruPLm\nRoWjGJPWfbPe2Zmz/FRwhxxAJsTymrJemniLWGWfIXl3ScEtQpuXfwpgeyy6\njH5VbPZ4OHx/gaKgCfL+PZQ7lQUwbOJn0LRFlCylOhZ/JNgQ10pTBxKxq2MZ\nTjKu\r\n=vS5o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGAcdTF0Pk+AksPQ8bx9aQBkLylzx+jb6ByU3YVGfPJAiEAxkCpOOY/io2+bVy6bBSxBWPgiUoXpv7EHWVQdRtHUyQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.fd8360b4.0_1624648141890_0.03714078481805805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.6f74432f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-circular-progress":"0.22.0-canary.6f74432f.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eM1sUDYpyZaTi7Qcj8yMmNUVkseA4oTLSmiNV6uUePiyyL/Yxb2wZN37GSqlkIJyMibHwLdfaG+Yhhag4dBAeA==","shasum":"b9532433efcf71d8ed48132bc99c78b46e2a55b2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.6f74432f.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDBCRA9TVsSAnZWagAAS84P/ijisNANg0qqDNX1G8fU\n7AZMg3tbp/5nYXsiXtoHWRAx0pGjaTXu7fV8j48d+EmYr+qXxugrjEvTF9L1\nXH/57k1ysvDdIF5CXiwonZa/z/rtR1ifj883/N/v/GhsYZHBuYU3si5+p6h6\nwsLDW+J71sk2OKSx9szQroUiBvGII3Pr0vZwIWZD2UiF02jJxIdCH0gplghk\n1Sq8pbF7jtgWCM9NH/bdoltNYGcUFLLngGv9hmIlbPK1ul9YRLY6TcMQTgLU\n4nHcnxqvZflwEKFKvBlDTfU6/crDRdS6GjCc33n4VXy4IuZAksMWEVmxvAMH\nOOe5dX0Maxal1rIjGYC2StwZz5jN8mWeV3SGSKVQ9Oi69VzJL6eZMdGprQ3z\nUX6LGNmKU3rVebfFNld3OIzT6sLuRCDoOMQSjssZhMy6wQ539zp/D3aVkbrN\nL8FntkqVifrTm71LJceEuzyYLdKU1mv1fXanc6GI/m/nTUEYhCiwroe7rCOR\njWf0/sge0MiIadi224ZBZYiJYxFDdf+yPu+cXl4lzlgRFZdubImJOUsxKH3Q\nhZ8nqwN5cKsDHLHG6XLTEPqbvj0n6IEPpQ8stQ6ZtP8Ca0M+vRed5wj5BFKM\nb5AcU/KfKPnUZ0bl8UB3KSuwoUOhK8KiEtAGd3qJ/0mfMWpBd1BnC6A9gi1q\nqVaO\r\n=RBEt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5m5F6zYjIPl63FynhwBtRJLzUNpLo1uFZf+aoMvYu2wIhAMQpwse0RsheJ9Bjvs8mkzHR+9WArf4z33Htooj5Jkif"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.6f74432f.0_1624654016740_0.14521995778706898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.b62f901d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-circular-progress":"0.22.0-canary.b62f901d.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3NavaSW0UByYnqeBKBOztUC98i7s0cSYIsR9WO2R2TN3PZ1I5sPhtroKZL7LKloC3TDWyTsXmtyr4jZv4NsorA==","shasum":"7c97996993f072773cec6582f2f8b4dd0f7f9d5d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.b62f901d.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXnCRA9TVsSAnZWagAAUJwP/1kqfP/Dr5dO3kcNLLJb\nntyzQz2eFYaxnvoQDMBCKLsCXZUAFWv6OT0ov3nwCc8ZCXeklBIgl/sDOIFD\nfNCGTARfedcfovTZhVtLXb0fqzPmKmPx4uYTRqy0XaV1bfiGVfsQ+sokdNYO\nH6qulKwzuAEgA13aaxuE/pZepUDLXJkR+eMIOuNPY/cOcsSS3o8qgQAy1Ln1\nySVSNPdQmi4DJbs3TPr4bwaCk09W3YiZlzujytD0Py0PzXteOdHu+bR3Ab2g\nsmZODb578bzf6Ug77glFK/ZNZdNVtCG/qClFk6gjNak9IH+kTT4DbLwB/X7M\nwLb/BtiN3yNhW3NBcfU0UeNxkkt3anvgOta6PZ5soP/RHsPUmLnLp57JS8Tz\nv2fmT5gHX032ju5i/1HM9um2GR8Bwgn6EMWya99syzSpT+HeXjjbTJpX4eop\nzEkyInB8h4MD9zoPCG+D3+6idUj50HeKZXRymzayN1/ehse0I6DN4vpKTdwk\n9McBWB1wnn9BJLch9BM1wGrvxCuMnjREXG8oYMgi7r5M4HObC3LRL6TjcLWM\nH5PfAE+J3Mtde+b5dcVtuPlW/2tQZKSI5iIr+mSV30EWqyHmeDnERfyooZTm\nuklW38CFCALpBK6I1drkwPHC93cg25uBMck1kDF+H8O/OEfYo9RwZ5SZ2x7D\nRWDP\r\n=fDy4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv5dYnM2TphdscoI93QrenoRJlzSPEZhVQP/GLI2XeAQIhAJG/lh7Bexrp205wU8SbwC7u3OlGNbM54zMM6S/vn8WV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.b62f901d.0_1624659430523_0.9222162821114126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.73122cba.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-circular-progress":"0.22.0-canary.73122cba.0","@material/theme":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yk5Ty6xZRn3HbsIjFHzN/dGWVJJtqE3VW8g8UanBqBLTHg0wsyQ4T/oDU/v9j+c4iblMsViPpCPjGIQLkVTAUw==","shasum":"6ea9179bea209f6e488731f5f51c067a203a35f0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.73122cba.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfHCRA9TVsSAnZWagAAudwP/1wF+x0UPxzAuw0oqsRa\n0XFX1K/1dIJPDTiQTvCz/KbzfBnU5WxRv1pKX17BEMrlz55705P4QRJk5Men\nwee8KLbUVd+8lIM/krAAyjwy4jc7ywJR3TE4k7fa4hg0OVO+TELDxbXDr+7g\nkK2fYXxdASxL1gH9W3zGfEySoL521iUc733gbmh2vQr3DUsWh/GEH97tkSuY\n5tJJJHPxjYmUYl7JelufDzw3RyZG0R4NiwLjx3SEk5yxHsr2JMpPlnCaSyZr\n4oWhSxpVH6qMllOOlDDOoCE/pQTGSaw73n6jWx2Qht5Z64wWSlQ4aax5I7p0\nPiOV7M+MXEDF8Oi04e6E4cydDBGhbDUzzyp9/xf3iemMH9e1TnTWhfAwXbDJ\nDACA+q5WfrOYbuFTKkOLr44RVH+ho9JHZs6FeAKwgO6f2oiUDjHdJsr06q0v\nJvLD1RHqLZcUKDn3jEYBiqhg5K5cUsxdxBT7SCPU2g0GhB+JHW/+52mpTA0Z\nWVwVsGkDL8wNHh/wyYyMBgX21kyqKS8l6XmtQKn9kRwgPq6AS6N+l8vbNbof\nWACBMkJqVbysuFDWNUsacyOzp2f6eMZJQ69MkV75u0w6a3jEzy+Xpwuxu37g\nNaquQesfhYAOGxrV4P+3D1SGlkNRqnCMVyZMWBrVs/hEJ4DxHdQYnvCMGyTs\n48z6\r\n=pJA8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcymGIEma4u701zsAH4GynsgVPlWa4kQWsA7TcD3w+4AiAjF8Z6gy4zuWo/AeatYgzKDLMnCmfYkhh1GkEiOXEF4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.73122cba.0_1625081798703_0.10531582889196955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.a6912af5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-circular-progress":"0.22.0-canary.a6912af5.0","@material/theme":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NzFUmZhP2xdgl75pnIXa1w9VqZ5w3amvlTl7Scjy7yqiPnrq/PCzNx8guwHc+Rld2Kb57OB+YhP+gWlp6XW/JA==","shasum":"40f0213051319d2f9b34a614ccc6339ec0c15f9b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.a6912af5.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTFCRA9TVsSAnZWagAAURQP/AnRoc22rOq6HX/0o/aa\nY426xj5NWg4UupBKyl3jsIK2nPhQvWyh4CIDa+4sLFgN++dQfMnZ1LQeRzth\nZzQvjmkLsn+GLJZwGljs2IpFj7TtIh96n8w12gf//z/zdOyGiCxMrRxloZip\n1KAPXm1qQjAu/m0/Zu9NKWc3CaE7WG3OCoOrWoWtJhcfIqKtLKxiMNvykt/4\nMUZcytmjs4IplA8CWC8CfkRbGYvaFKmbpsO744VspHeOoio5Dek2ZcqqgGjd\nB9txy9BjGevIJ1aI/uwt9He+r+86oimm1IEeG34I8iY8GLKRssiZ6zFt6Hlt\nFqS8zsd1qhjQ9VZ/zil8sxq7z++r4SeC8e7EiJSZ+PAMowMMdr5YBUqfGJnO\n/EVEhuTOs03fmD9vDmEBXTiGPOVAlf9Uk7cxazpPIMN2waysYVTtgDCwZ2VA\nFaDfo6DCXHP78VqZTDZFoZghYNyOALHhQsSv0giTFqjLszacaZCOTdCl+cOS\nre2iRKHZoeuAB/kjshoWie13d3QCrC5bBgJSB+Q3EE82Nm6BnegwHyjBpc0j\n5cBOD6QywXYTVzblFzG1Qkgnp/Q4W2r706RNahjxZxJD9hm/+3Z57Cz+762b\n/JK8/O9hAWaKcmeZIgMxkin9wTMS9yzb//i3Lj/Ik/Zb1RhBWFWZPLaeZAIM\nEFnD\r\n=pdhA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDj9njKGzBiqs+dkGKx1WvhaCRh+QYLP2qBCLl+GqCDkAiEAjX7qXTnjqN0hYDqmzITg5g0Z7roTuliw1JT85wcslAA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.a6912af5.0_1625175236601_0.10727416642308119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.134f24bf.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-circular-progress":"0.22.0-canary.134f24bf.0","@material/theme":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wgaSjVHkZuy6cbN3nZAhHiyMnKNB8/ic/wf8UqWgdqW8nYOJmj/dEo2GcMLedsbpbzyfzLwcIkfNZ9ihjy/R1g==","shasum":"5ea18ba39f10ac867a98ce78fe0001f0b09195b9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.134f24bf.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJwCRA9TVsSAnZWagAAC8EP/2MKutv9b3LxQbIx0Lu8\neOjvp0E5KOzZNx7asOyu1DfvfP35Ncz2bXYnJALmoVGqDRarnTcMVCPchKL0\n8aMiGGe7aiwTbl+UUeciKNXg3iMzXu5OBEW1Qh7et1UX+zo4YuCMnMIFxgQk\ndt0fIk7G5ntU4e1XOA33z1n9TqFG0OqpDBLmV9fhLtho4Xp5sbixMRDA/Xs+\n9dUzYu1xIZiOc454HeV9LwzUfUeZa55DwjSJ+vIJjI2XAOLIR/jEO/6GGIjJ\nf0TDAHxM+PuVIxm5fTbKxuvBSnA8Q6n34Dhq7FE5zdiJss/CMM7g5kiMDIMh\nEqf8HXAUIfB6FEITlWvU89bN/p5RjDcqUEJKz9A62poAk0Q/zVrR8tOA1JpD\n8rXWeNW8X/AwpTQYzdVsikpS5820o6jr3TOieo1jbfn6UdbY4x6PpVnSG9cl\nGwfhnubAEZIh8sH9Qeer5WyPSY3bcfgOFgsB8EmapN8Ip2htV7rLYzfvQSRB\nnr6ZaUKgwNAdhpumS9NMWYqgyao17bkJg1uK3TjOcRT6Oaoh8c3sAtKRTcM0\nL16C4TMskhq2vVZ2XfSf1l0ZSWRS3V47igxsMspNsayFe6zYS3jjg/HuoCsc\nIQ+lEd3ADxQL16s73vJnqDktWlr6HLqLgfGMC0Pv/q1ilO9wEzy/NMn+jkHW\nUYQ+\r\n=xlf5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3LZIRpsL9NpYOvjRl3xYqg1N98b/FZW40D9FaRZ6ZkAiBqvZgocjBVPiiSx71hho01kNZm7w234yx5OQlDLB0YnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.134f24bf.0_1625178736539_0.2792018539284924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.1debb78f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-circular-progress":"0.22.0-canary.1debb78f.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dwhFFnIHqt4QE22xZwYy8Mh79iHXSZi2+Y5tOjbKTiDaj4Gb2MGh0hOqiT+L/MvCxNoIoOxiojGl7rASWfuBFw==","shasum":"7d15fea455c4df6e59f050e9e6eac5ac7795e51d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.1debb78f.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlVCRA9TVsSAnZWagAAx38P+wW+UGHVBhDwgUuNthXL\nD+U5282bQu+XlzwKvwknqRoKCduB+V2EpM3P971PN9GMqxrAv1DEJkJyGRnL\n3MX2RjAmDAcwsLy5Z33D3ax+f2RQX+fEGZiRzjoHOQdlOng30xMAh2Knb0o7\n9ySmHc4JEK6YFVC5oE7BkWYbw2+iH7sKjK8WthTmPazXhlrgOv+kG6APAlsO\ng6JtcgsCErynV/kSRpvOXLI0DtN44q9pyAT3j0xc9R0iiRsfIXvSDrcaTd2e\nho8RicYG3G8L/76smk/KRDb/DggmIioWcFDH1KkuswKKAphvUKreKZWcgBHo\nx9+hVFNA7nMU8ScCeSHstfhXO3A2eQ4/J9Ebf83LeUIDfeXeBJjEClI3fRUu\nQsBFLTYwoTFd7wrkNIhF2naGFJeC3B8N5xbPHzFEedPpGjNfyapm0CAZt8D6\n3FE16MIKV7eQ/1NaQ1BJgk5yTT7Fl/ns9H9v3W7ElqMAYPwaDcH+BRF+yO/Q\nhWwJgt9fPQlOs2mUdwLFMwDQ2+YB3RLYKfP11IHeGNdede9qqiH/4+JYym0n\noKd+MPzEfLYcLalG7CxHA+pl/2+YiNNBtAMXWipmM8Iwp3ra7Rw544ZQqp47\nNrm1MOsr4lsbBZDC2N/d/auBRD9LR+eFMYxFxDxNEkmQZobGuYXoCB9OZBLK\nqt+G\r\n=F0z5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBm87e7UrqanUOpC2gucWEPuS4Gyn2guD+rruBzUQnNDAiBAHS8cO1d8aKkB70tvMwaP3AF3UfKUl22oFrOUHH/9ug=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.1debb78f.0_1625618773279_0.2870639564675097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.d53edeb6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-circular-progress":"0.22.0-canary.d53edeb6.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0EV35Tdzoord0F7tlbdpVyEeJ/clRXLu5PsHhpSrV8BBGSq4364TkS5f91fIX9F9QDQkr+s9hMMNU4yHLxl/3w==","shasum":"53d07872e34775c37e9cbfb6e4ae976df8088999","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.d53edeb6.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2ZCRA9TVsSAnZWagAACQkQAKN+7BVQsMb4FZpUlvr8\nSdiGI7PFto2/OD19Mcnwn4oj9+h4gyXTzcQdoq4rLq6lMAsJ9AWFZP6aSBx0\nK7JK7VA+xbjjdf4zEn1/CWXtZ/XAUVWgKLbfoXNWrdMAfRKfdy4DJFgEJIV2\nXqzShBxDnf7b//flF/SZAzjm+S2WymR0n8d+7Cx89AICgLoK/r7MiZlmdGol\niIJuwx4WVqhicIPP1JCkrbGSQqHAn9lqlfR5ORVDNTrR9eFiZJ2/SxgsHYYK\nu1eBDnoS+8tlOgK5/buwdfAfjXghTkcYQLwRpyq90T5PeuP4nKkezZeogpIe\n4G3I0tdmJI0HWmvn9RFtJxk41b1SMI3gOwL8MxPSvGLFM5FxnB2+B7+oLxjW\notaBCHW/eK5pGURJkXJDP8TiBYE0OnDn349iOrI73F2W+tpTBP+cAuX+S7SP\n55/7xVRWFvo4UeYt1BXOrenPvRIFC9az/+PGDUE1mYOL+tw3/Ll/gKhSq50M\ndfyKmr+VDvNdsDcfcvD4gcyiBMlgmL0lLjMuM4omF4MPZ6kJtMSn5YFvwpIY\n6DT9/dZaeCgC+LQFYtE4WCNE8PQA03U7Z2eaq5ptWkWeN/WwI0u1JyC8+9fm\nZYspXeFgCi5RvRTQac3axyPzmLHDzJLBrl7gqTltt6L0k4REdFYzfMscMN4l\ntjNp\r\n=xOdc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQHAOWBNEWndY+e62P8nlNTxDJBeckHtJ61E2Z4VGPlAiEAiaakUxP9Yo2ribbKEeEcVjcajQNjMUcKj9V4fbxyX2A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.d53edeb6.0_1625677209474_0.38415590300854396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.2226489a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-circular-progress":"0.22.0-canary.2226489a.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5pcwVOHabxy0RQ1xR6t+75TVuUqnX4Jc5Wi9Tmhyod3aRx8vx/goUnp+I9T3TvubKe+W/YLsO4drFq1z/ELe6g==","shasum":"6afe140b35345b5a63345458e4c3bf735458d7c9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.2226489a.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z12CRA9TVsSAnZWagAAF+0QAJiHYumwlz+NGuS1s/g8\nQgiR5boiyHUsfAKnxnNwxlx/i1LdI0HCdSlxNrKxy7Dh3iPxJBsc9NyGn/aq\nc1ZvhmgvxkvKEtLLmzwM0CXqwjWXMBYbNAFUVKKcmKZQdxDpHTjBNiWBs0Z4\nGVbFlYUfLKZ3+ceLPnivsw9rZrAzmLCU+JQsjxqpr/qSR7iTVtl+q7p5/F1S\n5FeY5/SfXYqo2Kyg4CrXco2hKZe+0iY7ZLamREgsluf7vPppNMU68ivW35E7\nJfVtlUNnpPO1ML5rvu9iDRbErBDBIvoYDdnZQ1LcOEahiV7BXuugI0Z87jNr\naN+4Uo4E8nDRCg2xSiiwlTfkdd54TgKyhfYdyA9bIZG0CSnK/rMT78EI87nu\nYKYsSqeRmlkkyIlaEVC+z2tKA8BtMd3PlFjavSlgbElOKOCXdTy5yozI76hD\nFJOgNaxDtKg5WcXLitfR0f25tNEYC/5R7HMbHgwoJ154JwbVCeYTFp/eKLtv\n419RI7qpUfMoXiGmaJGBnlObXLU/5FYVhX5JdUZxncwxpWkGJl/fySHiC4vq\n7+722l6fEIw+EzEuFJU8DijqqLOQd5k9u8Dyg2qpGjJoB1c7X37kzvDqnFu/\n6M5DywRS5jo1S5maqj0FjUfXCOfTDdFB3bRJJm2NqoTLBb4yftGsneMp50pl\noPPS\r\n=+TGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVEXMHf8pkpZXF2H1BH4bs8U2BqA6ciWnlUHHZdWdoEwIgaqC5S1Y2m+CH0i90Q2m+QO+rx0oI6nld6vrPjiOq9Us="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.2226489a.0_1625767286078_0.08015563781559187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.d4801c11.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-circular-progress":"0.22.0-canary.d4801c11.0","@material/theme":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kxme23rHyQrdsMB3RtV6vCBPSoYqA+K/bn0nh27KrXiXkSVF+rmLw88kFLqX99VW9gGN9FZPpEJJdQn9s9U0SQ==","shasum":"6b1da17d5061bd8e92579b400ebaeed2b8acdb6d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.d4801c11.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51ngCRA9TVsSAnZWagAAT1AP/2LxXNXkEV7omxPJtjk4\nLiOCXxDW2lh2aOY0SJcggIJgDN0q4NxvsiCRWoKsoTi2d7qpBJsANKOnBoZ9\noSBukpdnBZPwu8+XkRGIDGptU1vKNXfR+QxMxlqrKuXT5IniiPMz3xyF1vsA\nqyUbaMo83TrKZjjK0Hk+eq8D6yGopfVoF/xtvFey/z7iuIpSmToNa8g4NHvw\nZc8nHnIbFoHWm6MyQyVFLTrLkm+uIRfAWH6g+5XOpRswFRhemG7KFwrGRC5q\ncrIXYxicbul1WY5DB6NzqopNZZFchPnA4jynN+7Ix8c2d9+qPGNW7vHkHK3W\nPOfSrQk2cZf8zpvEyA6BmVkEUwk1oD5IEN2qPB3GI9ZMAGqRoH9cRIlPtEG+\n4Cr2aoHM+6agVP2P6/ODHvpOTHm2KRJbCmFxVppMK2cGdrPecr2aDyFCXH6o\nq8iDmmxFZNfGqdvG6mu/BhtO2ztG7E7kWYOP4OXZ7Q1qxocPr18qViR4hdAM\nTO+vzC+2vmIwl3efGZeIG6So0CgyGXM49sJuBRPaLcDgCFb6i7LuvPLahrkz\nrl8fkbr3eKI67STbNfvmA44jV++xFnDzdolbpGMcSTvjGeii83cnjfMSPKpb\nu2e5KZuRvaHVWVnEmxj3kqikB86VshYIkOxt1qsEydgz5wdml8ahY/QXxOMG\nSWvx\r\n=Qxsg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBZvPQJSxYoGBC5au0qPQ1KLA8RpJI/afyAdYkLCKOYAiB5Hz8uPW8+zEniKu1QaeyWN8oHQ6h6viHiGTEgj1HzCA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.d4801c11.0_1625774559866_0.8535265153219678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-circular-progress":"0.22.0-canary.7ec5f2d6.0","@material/theme":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yMz6OcRyVCFhKAjZ4WJeh2MhqDVZfwBGmOiAjMMjU/jl8HU7IF361uBVAxe7LWmxG5h0gWKlf/zbJKfBGxGE5Q==","shasum":"cd79fa88ebd599df079aa3a7ca79207f2994da62","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Hj4CRA9TVsSAnZWagAAMN8P/RqYnmNmrQgVDX3jfxdb\nGS/+e+r8+iZwnJqNwhooSc+izcfXjY1csf1t2HbZUuqTnoKt+qf6QaogcYT+\nJzEz20WRjHEsWODsQGYQYnmfNfBHe7zuPK/CLU8I0Nld46ngaYP2gJ/MGW8y\nK0xxxi4xOYcAAOuPNahLJeJWoQ/v2/Km+l3yUW6Tk9sPrxZ7BEBCNG/RHUhk\nReNnYp3+iRuaQPgNQq1bKijn4/GbJww0lQXP02zgOd9B+gA0Vd/iS7uKk6ht\nO7jrw0s24UAHwOmehpk9iZgVPq9gPvaTquunHM93tcdLKHZo/liL895Stc2o\nc4UTbQLWO0ez0s3EqKc+jH8D4K0SJaL9N6GC4sWWFdVH5lu9v6V0CHLGybkZ\nqmAMSnTCgvpL2See0HpAwDVDuvbfNAzCTFCtAvkj070y7JhZtZcA7GgU0bG3\nQBqV4cPxx2p9GE18x0TRyb46AqzF3JCy/YcUc2Q8iL2L0BSEcXv9+UBm/7BL\nUExYEszdJTp/QASyfUGeudWSAVnOxtR9U1V5sZNpyyKHPvDnhfPWXJFd9XaM\nUbOGicUd+fluiByLkUQQvi5R9XP9N5cAQ62QWHE1OnDtL+tx8CXjy+rWxCbh\n04It8ZH+Nt4kXK2SMaAa3A2KmUKfL0uebinDHtOmLgdyqHEwZTlRj7GTtNhw\n9L20\r\n=af4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRqcJPw9NhH1mkC1z2+SzB9WRfoH2j16APFtTs3y0lXAIgD9TrDa/QFNgtd4WRtha0T4W2E+ueHN8BhvIO50nWtz4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.7ec5f2d6.0_1626110199888_0.042663862870507385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-circular-progress":"0.22.0-canary.86cb4ca7.0","@material/theme":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EUMmIe4Cfjxvdn0JjKJXohlQmC5mm09lG0Dnf3jsyObxYmHyqhddCx1CmP0+cDFaZM6vqc6AFVCZDk9g7RJ6eg==","shasum":"472d3df03cd149e87108458956733f77e1b83c74","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.86cb4ca7.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9aCRA9TVsSAnZWagAAh2wP/3MM8apZjFyHjbJh2xZd\noOEMW0GGbR6iUiqVg6ngTdK5axGWbHLtGmJ67Mdl7KGJWC+zTFe4BTVRiliH\ntGZi3yn1J6Oad3IZVSH4QGIExxXUT+4CjtDj6G3aoh1meQyu+uoFaoTb1jdL\n8S46VqEl2sBLZwbc4CzkFXw+EHg+KGnmUoLItS7PlRxlQFE0qN9e+uf8AaEK\ne9sFpJiRwOFUcFZewkdAHZjvQOh/WGJrYDB5M9jiY1fsez4FKEvbdLPXiJMW\namZY798ZjEy2a0XCCiwExFP4dAGf9AHig2fR8nhL/7p4X2Xs+NgNUJ5jrhJm\nDQOcZdlcl7rQvzn1wSeIU+MtbRZjSt3xBEMLuSNoVoFOdmw7HVcPWCJp1BEL\nqROzeR+o3XPULc96YXNiUpHA35eSyAPlK0V4m/olQj006g8+s2xQnif+af5m\nfs352AcqNf+IsOUADqiTMEpp0rxMIJc6YS/EKlQph0jvoYfE9Jy/XdnrxSM8\nlvYAMdRjS1PgntYFJ7ta4LIlo5bQl3OvhD/qDgWadBqvDQcgR8xmKmGyiAzt\nqbbZCY1yNBzxLqPjyAYgUdHrGlHoycROHajeF29WIECLBLf+IUIPpWYsf3FM\nXJaD5a50Z7DhC6zMQMX9xLUb6RI2UYtjg3ErHrQgqLNx7i0S3tcRFI/5a0UO\nsZsF\r\n=01nM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcSURy3F73e/Ex03/3nstZtgFoTZFVYUawGcSYNQYhGAiEA9AgE22UrxFchz7leA4b1Eadl7klvXsPpm14unMim0TE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.86cb4ca7.0_1626197850066_0.798058238202886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.bc9a724e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-circular-progress":"0.22.0-canary.bc9a724e.0","@material/theme":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TRnhSI1TZrrhhP4n8fSNY8bIZ0lEbd0kK6pbCbrRdAL026nDfSy+aTt5W222XrN0WVIpHWTCxMWkhmYGlArAPQ==","shasum":"b0a7c8beab8454e9a4fadaa3996191ce6b09b310","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.bc9a724e.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d53CRA9TVsSAnZWagAAUFoP/2A8XS3UjB/RBWKLwCrj\nf8EcL55W9OWOq3KV/5SJCeoA0JM/3YnBVk3euk9RhmrtLgPB9VO3caLhfPrE\nlSB8hftL6NqAx0tqpi7R1T50qX8bzUM5vx1CsAl1pislIS0wjYi6bnipJDG/\nnY4r4NooVhsFrcjdIzFhOqOxYZC49Q+W/q01Jyij+0xV3Nq0rrhjI/dI+ud9\nKOTwyNqX5GH0C6OMRWyyBGC8XXPnrC6khtfhTp8R2bWEBrPX2DRFBd4L+2Z+\nWZ4XFXZyFpb3VqG39wMNkH1moVQs0E3N88B3yXAZL0FfsGMPkNj2EFN86D+K\nZ5UEBVvLzMUr51JrJDTmBrxHio4apZnRCT7GAjuvKT1uUR1nKor5Ao6r/sQt\nAmq99m/UzH/OFTrRgvzV1yelyyTNBzkxjczc2/dUgzVhSV0hjPmiUEqrOhYQ\n23MWrgBnOFSMrpwUyLwn+RIY4PyqlOJ8Sa+urpRvwK+27mblF08hfcfZIwZf\nDXDKs5gRXtEiui4yr2slrmG9Hx0gZrN2QXya9zHugl8E5JxUGArwUA4WFvGj\n1anfJbfyzMbM4M/AWun+BN1sSKnrcdNv87e1tRBZnAmcT/swXigEMrHOKWHE\nY+kOkXtD+bfLfCjmVGpeGYyBUdGD4QFcOeqyVa0GKpHmvJ6XTQNrABig+Gc9\nzfP0\r\n=YH4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxzLBMpol5RotHJBOMBeUFFjoNmfOv7ctigohXlhbSIQIhAITsMvjIipkBi8DoX6Yb7So4vr2BdQWfjAos7XlU01oG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.bc9a724e.0_1626201719270_0.13447443585157792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.7847b83a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-circular-progress":"0.22.0-canary.7847b83a.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U2exOGTlC/NJYLEtleFc0OgSf01ulUuwjkF/K/WnKBuYMyVyshP6JpOHW1I3THDZFNMGimlzJjRlq44JPHPNYg==","shasum":"15f2d18afaf4ea80d32838470e35db751e1fd4d1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.7847b83a.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxrCRA9TVsSAnZWagAAI9MP/j0EEKd8r8or4HLdSkuJ\nmvGXeHsVqaYKTA3dJ6DJKOC3g0Dx6jOIevS47KM9NgphU3ywlgbL5CacFeRg\nzLbZj32qQKFNqh8/jBE1MVCHNXot7r/OcaQN1UH6SBEW/GM+ygE3xfHCfz4y\neQVLLSnKbouahO9P4Kh7G3qNfYbeXMnGiCdzTUALoIOAP7izElVNoFHXUjd/\nugZVas+2VuXeyVMd7Scv2QKQQ6D+2H6yTcPjJoKVxOD4nYGHThIsLwRkCzKR\ntyC2f3Xd2xtfljj2d+G1WNk2u20GcHfumgll/zLYBP6t/K381kwxN0dSXkmr\n5gVLoc0XF42YIjEkrIc/qEbEBeptiLviRoFXBrJ1GdGzYGjcyK2s2TYo51qN\nDlUA3TUI9/+9ixlL6vWinTTAsvD2f6JAmFY5JzAyKWTTlg6gCH+baGPzKeIX\nWd2HQ/810guRhCrU+HKp8RRzYxGDEZ6eQ4Z3wbBxkJ1ZskiJS2ZdsNOPwtJJ\nN1SA4ilvizA7DrRJfFzyauIUd7jyrRfFkOefsSoZ9QRB9pNAUQReCCKa+oBf\n+AskP07wnY++OgzXiCsxpINvAoEmQo3lEV6WWPjX++M8n3mCei3cr7hvorKF\nMAzROzsTIVN/P9jrDqPxiYxzLkYaAQB8Zu3GX89CDWfFK7WrlcwGDMmIEyNt\nfE5U\r\n=DNLZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaE0eycTXSuZ9r5tYsbrxAIwRjEZdSRfckZbKedh+A4gIgU9FgBbMg1g0bs57TerTq6EvaNCiuFQEWKpMovmtrTaE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.7847b83a.0_1626283115199_0.017248551099480203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0-canary.8cba18fa.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-circular-progress":"0.22.0-canary.8cba18fa.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kN2aDlyR2jYWjCy/JVm3GtL8BYSqu4rNn+YpKTr9+zQT+C/bMYceluH6KRCkw6hNP2gmlumho0TcmrTriYOCLQ==","shasum":"ac4f50fb152b558010719b665185a9d694dcfef2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0-canary.8cba18fa.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70h3CRA9TVsSAnZWagAA/3MQAJ4vEUKIlL/59jG4SRcT\n5I+FeHFmKp+XLvBoDU3pGQOytw8843qYuMzertd4xg4TXW6KWxMunBb4JjW3\nd0z3SvDztZLcFJ5V8XC0jOvRe28mKnLplkK8KRBoXpDJ45S92ZbuwKB2GCQF\nL7LtCdd+P4mGkFhf23LR+QFSIjEIsj0OHyFMhJOp98ulT1obg4w0k62bJBIU\nCyJ1AfurCwR48z/yqsy3GRp+0uDJ7q2mnJOB45POrJtU3NxgSnfsxZnJHMS7\nJbdh8eeMHaewvP/glFCwEsxEdeZY93wQ/axj3+ib4VmvfSfYgg4U4EsPV90M\n8IWA45lGCO2Ixx6oV21XcV5idU787bwwT6qyzcqXEzR68t3SnvJjFrVzwyPO\nKTENjMgz5CihqzHKphpbBtFgD9ivnl4txpX20gii/RUOjZNniTweS8TqpIuQ\na3LBMwJt5EEN+9XtXSTkHcweLzgosndtt2FjyaBWAnp7HbTAnn0vsEGvxn4l\nVN606XAQAi+G1ZGSvMZg2MfpGNquazhi1mZql6YHjQiF6XaZFBESg8pGL09x\nxJTinVutFxvKc9Y+/fUgaRBz3reyQcWrkJ79rl02DW2c7yfMvHiG6k6SbWvL\nxXs/3V76SrE6BlbtdM99Joxwb1AvMsy7j1nTDsplq0wOARWV0FDgl0K4Ynut\no7xm\r\n=GeUo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyTVJkQ8GN7lWc3WXOYTrqasvS0DRZYPeU/oNgHU1zcgIgLHAr2bs/ZKyofib7VW0/o8M6/BIZqw9SN1tLeUoaWzQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0-canary.8cba18fa.0_1626294390950_0.7574225271720447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.0","@material/mwc-circular-progress":"^0.22.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-gHa+t25ySOW3PJMMdoPzEYHFdfPngJ/yubbVCHJzfEBWDe7n6O2IYn83yUBcz2K5l+ZUcV4XiFDlCIzX93JzAQ==","shasum":"fe1f162abb497c545375933fd9d3b2c967feb6e0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.0.tgz","fileCount":16,"unpackedSize":37558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72d/CRA9TVsSAnZWagAAHUUQAIC9CuD8IUIFP7CcDlDe\nc79XURf+BOVg1CvUF84RtVZ/M+GZsRKAyxATiQOaWtvUbwdzMbWoCoeBRisk\nDFGHm+O19bD2gs0HBOXyUz6Tzzgvvh14HOUpF2QKujkHDYpM0ldq2QztuDOM\np/VRvOSIwVG6TNd6zghd5VlTTfrwS2XKfsatC6ARPkvbzJuxgnhsZ0qmwt8B\nIUL/FfeG7DJeCxxHHoqSkf97CgcTUCZPAkIPY5IrP9gbHClEqbtQn478G6Uo\ncFcqRJ/09Z9dIEpFaU+T5QirMyq0cghtYqgq61nHKJ12ccNad7S0UjVTvncu\nixMWUF5ijB3Z3CpSt1emztRB4ggXoOZ37A1BXo+UeT89jnQgHFPNy3TU0xR/\na1KhhyJeJDhiJ8zUGSQEaRAVx1BSKdp3e3E4PhCeZtxF7VeEr4hpOB4sY59K\nMnKtjImbz2q6jRWBmn+xbGsJtTwsSZFVbBUBr1m5u8MCk0uc0+RttmgsEuZB\nJNZGOmjKAn5lAFi7dUWpl6+39oTRuz+6qvtInhKuGxE45dX86Hyo8o+EYslT\nvCUhh0K+yAoKB0XEuLtizB0/jon8Jnjrihc74wABViJxa5Pr/iF13HsZyEw5\nUWLk2BN75dIaIPlQ6W1DGOumPvrgY4HSp/lCXGrFykYyOAZDPE48oDoQvwn0\nNdhA\r\n=uHIa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy51lSzpCgJyc+/mqVt9CYSmi7GKlOZ9kGeA7X1ALuRAIhAOebyUi0SHTOgVK0wOwuETJOP+rc9w++xwehi40FHa7+"}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.0_1626302335407_0.7884833627249821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-circular-progress-four-color","version":"0.22.1","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/mwc-circular-progress":"^0.22.1","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-2KEANn/lI78fVP0EdJDmIN8ZfLjQxEgyE7MwLrNJz0S1HG/eZjZd4qTcfHifKDIWjR/NsnbAlc836HAJDkAaNg==","shasum":"7921344a5832280123adcdcdf501a1de83448cd6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.22.1.tgz","fileCount":16,"unpackedSize":37558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rDCRA9TVsSAnZWagAA4AEP/jd9amvK5O95FlrzWawv\nhu/ldK33/ZeN/EItK2xZTPgksQk5bonx3zbc7sv2wXgD8lVnsM0+o686nOIG\njAd0+dYPOGgmq6Ji6cTbFwbXbqSKDCOQEze8lAjuF1kTUbTMh4uK2dZiCahN\nbVJWmPljVlZbYmex5p0WSvK9QSabD0siwoa0nV272yHFubJj2G21/Zwi3z55\nXJubERjLb/5gku7Tfs6xxWXuom08yqoQctdH00Ho8lW5ovAdc4DjN1qcHoWz\nQbYFClwJwh55OIQWXgUsK4rRRUFCMoLBnstnoCT76NiHVcwiNoV44olo4t4f\n+KdjKvO5lmOiFhYBRJ23yexq/IveeKjtb3dG8XwIZ9bQbmXjVkld85F4MEEY\ntRw756rdqxUkVrIPb+XyUo7s3XPguJW1qUNioUC0dEynrD/cb80taCPn90nQ\nGRNnF6nAQXKsoFeKuqZum6Ii8eDzkgedsx3FOZwyar+J7OKfTk8057GPp8QT\nuoggOK2RIPCjizdaocR8xcadou9Yi+5MnJcxXZtleCwQaZlDrA6zOBUvu8T8\notMnWYIrTYWCV+Gww4ePS640Csl5qD2NzN0aM0T+677ORkJcRfVGQudE4w8V\nEOYsglHo+UjHy3LpA3R3LL6WoiOFymHroclmUTXuMiPvFRUY93Jo6+qxoacE\nUI82\r\n=6S+y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjmNXXJZa5TPUeeBpmcqTmxQXDXnUWOEwJfYG2jeoiQQIgRq3SCW3TQXExjVgmiS7HKbnSgchBX0MgCg+ANYmMxB4="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.22.1_1626303170741_0.7182393309127357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-circular-progress":"0.23.0-canary.fbc09b4e.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-njsKpLf5lRTO8S91xEIO1BQmYwY9auz8g7H4I896LsIF4ppcYUb/T1eajvQDeclXPgD/sAejM4NiL5sr69Ky+w==","shasum":"c22a1759434996bee6df18ffd085fba01a7ee898","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.fbc09b4e.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sICRA9TVsSAnZWagAAXfIP/R/db3QYaIc5mZKTPK5Z\nX0FrTYSWH3cZ07YNMR0dD6TEdud4vBTeun3rpTC9IrB1WxdbUo+ISLBUgBuU\neOnxe1hw578wqg6rDbQ3njRuV+TUyQ5JccnumZ++rpjFmzeCuPDX0BCJBI8n\nHNQ3+zAWv+pFvPxTOqdcJaJrtaI3F832bJuhlhpt5ksYUc/JTapKPrj/JYaA\n/+nnms2W5XmlEIM52tSslw59jIC92CoGx5vD/hspxpqDILytP45ZiNaIVeEx\n6aHGEagO+orEw3jU1ET5bAKnpF9ll7FG/Ve1uP8mWar9nph9P3jtxqgfeb6m\n1hrKBH67GvJIFEAVG6qb40AryHZL0TcG1LGWSn3QqYJG1ykIRwOijoOPmURi\nr3KbmIDm7qTuzjBGV5g24DVnaU01My2qXaL20fvjNRkhhD6/L7XAla0vFuvF\n4eZZ2haZoHzUlTvHNOmnp7PSyRLbF9cAb7p0T6AFwm7bTI2q/t3dBeaktyPm\nQ0NKVl0mNdBOaBdhkEzA97QeMIH2Di5Q0tVWuPzDyJySlpgYOWug/bzXsk+n\n0ZXY/iL6m2rUb/CPH1RZnAZQlL+A4HFQ9fwj0IS8HYTDag9kj7AfezmpoW/4\nHeVJ+hWXOY1xlfpVaqJoEv3FeQYwrNKPlRhXAaImrx9vVPm0gLLt83bQ7ups\n9WOx\r\n=YS7p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7VyT8Nm8ng+nKWRnLRGDYCQYOOzz2a0Kpz4ugxABhpAIgb8ZywoUq33I1MDfYe+Oh7V6ASpn9g9Ny1MmnypnKkxY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.fbc09b4e.0_1626303240191_0.6246183218940689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.73e9f83c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-circular-progress":"0.23.0-canary.73e9f83c.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yMFaTxtM+qZQC/XYRHRT67PsDOxSZiaF1TpZ9GNefVLK8szAS7BtilmJ34tJJR9Bc7ifCxiZM9sguxWrr1e7wA==","shasum":"65c3238b3dd383868356f23b900c495b4725026c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.73e9f83c.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0BCRA9TVsSAnZWagAAYyQP/iUtI44SIqA8FB7oVgFV\n998dsTh0YcZO3JGmuOZwNeg3A0h6hGEmHWiQuMF+UIFxw3zyuk3D793NaqSu\nqlPEFjBj0QEzVh01D7KM1yNQ1fymDzUeHpAxnck8pItZdESX0TGmKH/Mv+Sg\ndFLMQnUjJigUVLXVrStiNAKj+1R93dpIT+b9dfXRhlmbmrkR0ntF5weVIYzq\n8h6ZmFMidZbenhpgOmpKD4rWNysnq4Dy64BuR9WG/4JLDvQcn6elBY+YdzSj\nmINn2DK+gkUU66sKzc9zdUw3hU/lBhqW6aPrfRQxTGUNqENJnTg5UzN8pSUd\nqxkmv4RKbFKON/VPYc9gZyPB6SHQnfZSBNymJmamyy3hLSDhyADsNHt9q1z2\nBCH4Z2UUV4fwyHqC4Km3dEz717SHkd69wDSsEzefiM4XdpmuSRauhPbbfukQ\ngQngsy7uN5NQkjAhuoLDYHgf28erKdnhyAbOZZxPQtizM721TFyqGGTqHjbM\nWD7Bzkx8ZIGKMdWsxQ/6a9Q0lRvQ/tlNoYErImVLKZEhhFK/61gQG3fzkKF6\n97iYfpo9k9+4gNV60J1Bnv2IUwVgxwi+3xgvMBsvBsmRkkI08Q9ylHIfIMgA\nremGgGMENa1OEgU8WxJo3Nj2VwXM7f2p16NnxywC5vp6gQCyy9mxXttiGILS\nj4Jy\r\n=Ei2k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPvJQf32Exxt9brvRaLOmjP3yL8CEf0ogVACgx63B4DgIgFnh0T80ZoQdmjdjczvrGh1b31ZBEj8mh8XYcBOi4iPc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.73e9f83c.0_1626381569067_0.37252204101901887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-circular-progress":"0.23.0-canary.cc0aa7a9.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bDugzMQAY3IdvwA44DACVzCivPU08StYZTL5TkU9WGwhP2zvt04DRo59FeHnLpTNne9WSILMxWc47UzsVJlfzQ==","shasum":"111902ae6206036ce047c9274c65f315f2d625a9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKqCRA9TVsSAnZWagAAnfYP/jBGA76eNPaPKAwYuP7I\niDas1ncJNePP6xAzB2So9Gm9iR6+VVNConaY37N5lpJ7Awp5WEDejmOXemLn\nijQ1qMb+bD1rxJ4TOvKM2ImAR41eS5GxLjuZtJDQmgrtCLtMIXY6wyQ7xWxV\nDRG5enzRNtwu672FSAlkXgqI+kEl0Q4StIRHx+PYjvIl/O84IdrzjYPcT9rc\n1fTEJUKcIGbfj3uvvkQX6G1AfHNRrtTBINEns0ihx98k0+ZhK8qGkrc9rVbW\nIV3xE4AM8JrYu8Of5L/jKAodcdZxKuU4QvtuefkeH1oWg3qB18mS0O+SJ7aP\n4wk6+m6DbAk+/0uFZZ/8j1XHCt6mSreEVikxpSZWPhMRUYjul1hpQM9xWQMl\ng7hfojaQmgZlEHBnkM+7rp1QK/gVW3FNxlZPYWmBhFBvHnWNsSg7A6BeNA+f\nNecU6JBnMy8teC03jWWeZ2B3Z/yxKseCbFp/M8PWpsTlD+k24ce5s35CaT2/\nFSzRxAsj26RIuasYQfOERSiyjwem4fHVxPs3fJe/KN1K9ZccH1di+tdU2Jj4\n0/jTh+a6rQEPTGcIbn0l4b4H0gC/uMkeKWvc+9I7Ud/XrJBwdWgrKWf1g/Pf\nToo9j+dsr/odd8X2HpDF2vPZGwgVfZmQfhkJl9WCMUomj6sRApDxy+Aw05yP\nmfmB\r\n=L9Ml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAON6grGXC2iiDrYTA67SGthM/3ek/XXj+7WTxVEychGAiEAvefA0M+4iRcwE0Fh7mxR1MQVSJYyrPzKHH3A+w2LVUk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.cc0aa7a9.0_1626383017832_0.8001975920688529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.a8fcac45.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-circular-progress":"0.23.0-canary.a8fcac45.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s2LSmpm1OR+WumT5LsDJA9ZVEAvbjhd5dRLXiQ6XoSGGRtssCwC6SOG0SKB1sAFxf6aw6O1eJp1oMRpd7uCrQQ==","shasum":"c28c8d93800282d99d15d2cae06b0aec31ecce1e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.a8fcac45.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcaCRA9TVsSAnZWagAAyM0P/2xYtZA17dN+492HmE7m\nbu9q74lQnViuugh8JooAFtpx0RxMmXT3Kknp5nrjwfT6E+u5x0Cm13LiABYM\nt/7XGvibxb3hmrIbAQag5RxZPBlISGX9vrt95KrwzNi47IJy7Er7rm+eRllN\nHVfdog2zNxUGR9Ca8sqj2oVzGlbevr4s8nsKUuV8i1z9iV9DcPxtWEM0FX+e\nyGASscbtBuZAXH8Wa9j4zf7KXebn6526webTWGQPJOHUzXdwwrhXYzBkEOzP\nwss0Zo6DxdNMPhQq1g6keZdvAmvZYVzVMsPzqHOkqq8b/qcopCKQznWvyFBG\nz6HE78XEVtG4ImherQgr7KlGSxA6eOOJOkCBmIRCTXs+B7M5FTqkuQf8rHiM\nQUZRMIpyho3TkqcUs0t/5KdF49LDVCUJSGGi3JUjT28l4TfPHf6mqzpucj7g\n+ZwWoILaLFxkmmhKieLDBGtafwrw4dDCylyULiJIBrunvBltU3WE4Ro03LZi\nv3DbhJzKsLcKO6I2meyk3z3u21m/mhtSE2QNkOmZk+QU+En0OCBq49Mjdikh\nkEuCbpoU7xBAmTVl7UtytPl8J0SkUZW0maVzpdfLsljNZVReujHydjtRtulV\n3Lh6ZalpU8Al6ThYQsBCz3m3wHGODc+ST3XsVEblp3kWtwHctgnCuff8PJ4X\njZoP\r\n=ItQ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTeuNv8J+aC5GZUfNu7ihJ+HtxatCq8slCLGmzQnzRrwIhALXGMrYkfly2mL6f729jt/yAokIs/BhIEEAqWCe9hnmq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.a8fcac45.0_1626384154595_0.25172972388755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.3ca580d1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-circular-progress":"0.23.0-canary.3ca580d1.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wjBg8F4+/BOV0ssy/LWhDwMZ8qFydEOdCEmEZ7/7poX2QFORhA6+xHROUvzJjzi0+ea3BWxQ4kClCroJp71oRw==","shasum":"80c461ea716cafaaf45951f4aa870cb9fc6d0b7e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.3ca580d1.0.tgz","fileCount":16,"unpackedSize":37610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDPCRA9TVsSAnZWagAAdhMP/2ALViB2fP1byguL6j8P\nq0bVI34MJp9yl426cZWQcmDOCuqGokS+YxdC6gdH0Az6tqNGH9JYierU8dHu\nxwRlHL0Zj/9c/+vTQiaMDFP3Oq6yZOL+o7WB7jtbFNyzuw1m9p4MZkLsdKfj\nZ1zOZqx6JF3j0JcYA9p/uJiLHtc0GLMYt6XQ3B0w56zhBJwVdj/20NGgxNH3\nXXVxMq6xMtya46GOIij4bQK4sCWo4PwRtZ+4AA3HOrA9uAvet6GVdIWBu/k1\nW7LsHePGHjhEaNy5OLXsfXRTtrgTsJ3rWEJmO0QojGBkmrf8Z/f02fbxZGrs\nLqXQe+WgYQa9u62iyrWsVF0e6GRSjQ3N7UDf1UgoTwXJxWwCM1g9FAYvSrgJ\nL77EaBb1o4rI6e+8NHq6xEdF+edbh8fzbDIWh/lLn21FonwsZ8dXeQWkwjmO\n7xyQi/J3I+1hmKVStaK3xoEU5e2jAIeMbsmcF5YbwFvi+9vdkewiqyIu3lAW\nm310mbEssSIpvF5vy5nvjw3FBeiJQXAnECSb/lMACPKQU3aOH9LhZiV6yXB6\nwg8Qd2R/qzQdpXz7btVvacfjBf2rCevrb2caJw9zfsDlmTirlAfIjBmr1jL4\n7edZ7ySrTwIEnZa8gN+J+EBv9Btah3jdmc6u8aMkeoPuLQDbWQrqsPQDXQhT\n2kmy\r\n=N5FD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF9GWdnaWME56dZAZrLugwrAy+Dub0eTIJgQXfqnIeMQIgFjjGAXEOUCfpicrFZU8BdtetMH/gENWEzjaJEu4QH7k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.3ca580d1.0_1626386639532_0.6268910005575254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-circular-progress":"0.23.0-canary.9e41cb2e.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+U/lQ4Rt/tAAkWMjPXHLh75B+8BG23sN/+WLovsgU3Q37RfiLaYgOBPUg7B2AatgttfCMYM6IqJBb55IKJ8QfQ==","shasum":"08185eda0883a4a06b15a497a8a715dfa27f4028","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.9e41cb2e.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/8CRA9TVsSAnZWagAAadwQAIA+29a4/wciKqbsThy5\n/dRGy2BwHu1WXkoGGEN/7H8Olrso59lKXThgebWA8uPG2n5YG5nvBr3sCKp9\nPHprN26Wld1bUaO/I0uSxvxDb4/7g51gBwDhnif9PlkB0j+qN/u4+3V9dina\noPBAkQOHLKjD+S2s3Un6xOrZsIjSdrnosF6vy32Y5iiO3Xr8gU7zJkyP3AHf\nr7sGd8PNfE8WI7HuMc0n9GD7M4dqIITAs+NJ1Jl1xv9MHnGOFykheGdgd9Hd\nO8WmUd4koCeuHB1WfSKk+gkY84z/p5ZpQ2V+oDt0vHpnsUMI6MlC45ij6VlZ\nQVd9346iAYybNNEhA24gbOncFCfzPyieXbesr3HoObKjcG1bALUUWe2imTj4\n5lfNRq9MLt973VRl2OCHpv3QXdL3V7wkFmNtUeCJEf0JvLmCMUsP7OdocuKI\n8IYshIsQiMa1chcswcNQWw/AfKzF3Q1nD7Xj5zAwyAVzTyOUtz9gm+AJBkk1\n3tMgHwWcCaKbWFDt91nNn0GfnViaPGVDn2GbvJRY9hUYXCnB5nqiiZQ+Z/CJ\nwKMjibtgCgLIGTWu0JpryivajsVTOumdEXm62KFwfVg1qNFThIOWCKRstYxN\nTbSnMVWtmyA8WBI0KPQTmufWIrXasiRpOQY5EV+XEDqSfmjztB1xJiHnlFqr\nASYt\r\n=Rzdl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBF26ZuKjxM0eWgc1+Sdu7gShlbM4OeqWnvmAl2vcJzxAiADTXQL2TZNpYTGeDYOmenwzH+rphxoOQXPKSsGAkWTPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.9e41cb2e.0_1626390524273_0.40214542192483926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.c180db74.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-circular-progress":"0.23.0-canary.c180db74.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RpF1NXIy/u6zU4kHl0pkxMTwmpxZ2L6ux254317T/4aIeWh0ohZ4aHIVvaBDFQdeBcfSBvxGihstfWwf1WbkUA==","shasum":"451f8401914f1cf0b0733e93cb6a54eb7364d5db","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.c180db74.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDoCRA9TVsSAnZWagAAJCcP/2tUhurNjr/1uDfwUMh9\nGqxRQ4gfQwZGIMVXanh4Adi9zaUNW/czHL3PXtX0/S+p3JfCuQrgLD9XycNO\njXU3j/6bUmhqC+SnwBFgRTD1HUvyR/HiFpIF51dlLSf1fiFSLW8U6hZSvKpS\nr27LjOagRrOO/VECIEj29Vl6lCKnz1kBGADdUa/PHDow1k37x15Z94PmlTPe\nXayDDipPK1XhlBPmj8lUQdeZvR/sExEiU8+Zqw9JfVCRuagh+plx0+0sjYsA\nwYa/FyTVU087RGQcKmAVO6bxBj1tP+l5is6CS3c0v8DpwwDZ5qUSFhihCQlT\nF3pYBpdYlgOR7dT4GwVTO7PrqRKWO/czLNXOfOnXj8+leF9oOG1aJeJWgJjf\nYWQPS9+pfi4z5pX11nJYM+qM2QGOuBfa7FJGz9Gi5S3huyASX6gRSRB5uXJo\nQkTGHcH4JONKQThRyQoBdRYZSw4LIE64Gv+rb2H3MXovsDLrVkeIxSRyMPZW\nXPERwXmi0SsyxEkKf2A9/Aq0/jDUdqbJy/f79LjKSeXNCrQfAJKnan/Vch6Z\nTuwrhhs5DUZN+p+kvDkRNCfdJtyr4NXM2t11+cn4bZi5x2WPdwDMfgmlZnVN\niubzzy4/XUgZZIvfItuC0cn1Uy5YQGIfdI0iHfq6/TPyR6Aux+T6k3+Fg0Tz\n7Vy7\r\n=aS3h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxk3nm8mYwwejpJ5dECPk+2Iu30+Edtz+UgMwJ/IJL5AiBW15ZoiC8D3SrPSwmxlnZ+DdDGX+t4wZ1e8ByfLM6D1g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.c180db74.0_1626456296077_0.8292356080025334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.0d0a9267.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-circular-progress":"0.23.0-canary.0d0a9267.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q9dnDRzdNFZ7/iHpjuyOvFV57OXnMJBAQBdxrEgwfDf385zkTiiK6Zl2WwdTg3uL1UB62EUGFB+/RlzHcBgCBg==","shasum":"f131462cb4c57ae32e2ecc9d8b719bb5cb2ad1b8","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.0d0a9267.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ch3CRA9TVsSAnZWagAAroAP+QB0VdnBDcxbyK9JlKcO\nshSZo9T+5MQyfwBRFoXSAc2xlBu2aVaOFzX46CbFE7i4brWRRc8ZC1qTPgGZ\nz/l7BaC46UVb8jQOjzZsIrOlwG6+QS5Js4RkyjOmOlJ49w5dQG6RtEFtuKqo\nnxUBZuA4Th1wXBdkEmUgURvcGuyeGRWDzoCKAur8CdwIfet13PbpGBQJkOFB\nUF76UVIwKaXg0UnNXpcFbgf5sqdSFFFwMgLxJbuZ4tsm2s12e0D5wXyvGtvi\n6/qLQddBj/QMI9Yuhk1hVmoQrQJ5YkWDrnZxXlFs512JTWm9NGwuqY1z300N\ncfzM+KL6FUqnTuSy2te72mLxEuaxINPf0jQGwb55YwMrCNIU4fIAQNK8tlYG\nKf/+frl4e7fXQopStU7u+ojUm3yVD2gFHoha05HIuZqZdnxA57zu+9MI3H2E\nIr6iL9XR/9oOYehHV6FZ9z69vPUCyrL0vMcOKEWJm0fsRAPNkkbfJxYrgT1v\nuoN4m0NgyP+xgv6vbfRXTGDTRc0z62ss5z6MZWhb9rZ1tGbz2kv2EIBeko8p\ncZyVdTKKHZmFtHZKK7il0zyVrVFBdzkD4P6bEkNM4XD7281fapQfgRJk7R6b\nm3g90YRdbwBtbhMNuKTIz3fiYPsIxcWV6PyL8aB5DEuLtIPZnIibEIheItK9\nHnea\r\n=c3Mq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqxLpplsymIJPyFTT9C5rUf4V2nY0DiN7yr+6fHKzJkgIgfbsYtXxcqRQFxii5Og0uGE6e9p1WfFoClBIz5tBLVac="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.0d0a9267.0_1626458230930_0.4852254118644419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.d234ec3f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-circular-progress":"0.23.0-canary.d234ec3f.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ct9Hesm5jxGcmiXMYsGjBGdCk1+q3PPBwqKBAjA4CzxOHuqqsiExG+CSh0p7CpdJY9AjkXLKY5M2t7sGixzw/g==","shasum":"e03e19699331b4d30d8c5ec7ab2b0a525e5c5181","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.d234ec3f.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8crvCRA9TVsSAnZWagAAam0P/0+eTGViZzCbu4njp686\nF+vUMvY+/gil/WaZQMlbn8d8zroqhNsd7X8AJAtVZqUqkHzPto+1JBX5vt8T\noOGr6Vwuq/M2M/EYpk488YUlqrRLXKdi/99oQZCaQNJPEsJNUuKKmsI+Vl7a\noN/oXcEPOAhboZfsN4toki/ZP0oPCDUvKMl/gBkRhLe1ztTXEx60trKlhTfr\nsWw0q73P2tXqNvrrWrVl01Y3d0m92rE+IanrmrcJwl9+0tc5k6CSwB+LTX3/\ngp1T5LmdtiTvT2fquvlpjPrxaVsv6Sq3tOhMyf5bsjJ+V7MV4PpLFOtOxk7i\nhrpdxUhW6S5jm4jlBktkp7zRTegpXh4YLBJUY42L05nF7k4hkSyQVXg4CIye\n/n2GD2Mk9DXo/Xs7Tcs2+nXpgj87BUt1pcxl8uA0I1CcaNvJLZ9XjWKQfzec\nAWdPgpe1Q3nNT3Ln1+DP9Ux0/xGyNKPFQOa+Ff6RWVVHZZWKkVpsruvo9wVg\nuipuz6dyFLSMGq2LJvIlLhUritnAg/zkcb4LcfJxhKs9Ojo4Pux5HmnwkOjq\ntspJZkA6F1eKtFcFoXK/gMWdDHWyxSGW+NLlIkEjhqGq8keuMbIz0jDbIdtx\n2S3GPs3FWnYxbb3igBo8RI647M3rEX/3rkOffussXAqC3UetsdDr6j4CD8Zf\nshDR\r\n=pMi6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAp3JR8d0Un9Wm7KiCOuhwvtWg9IpS0AZ1m7mXH+ECevAiBT+Oyfb0m55yhKj1lX3qAwOluVSA5cVxmZTiCiCBj39A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.d234ec3f.0_1626458863745_0.5678814583015872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-circular-progress":"0.23.0-canary.5cd4bcdb.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YvXtPLGH+86OA3CSiV24l1tS2dvdbt9uQKFS1d+//us2TwlKBTbH+GwtaFiYP9E6XQB/CdENuQoObiCC5LqmzA==","shasum":"f12ec1e9d4e2a238ae85d02c6a0583a7aac1d8df","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYiCRA9TVsSAnZWagAAENQP/Ait2gLdHVJR+P0FcXCt\nzGSUmgSc0Q7cHWTLVx5OP18yAPcElG6y0dRX4d8qaKTYJOLM154k8ZUpzp0H\nq2nemAQecLgrjSGPmaOrGdzhv0gpcQByMFkH7PjI9A1fRwRALsDEuq9pQfEM\n6G0PQEshUpEE8nHWyETShSPFzHEMIwoDUZ5GetsaJufnsWiLLja10NCY96Q6\n1cz1uQKKJRkWHdWj3UKCLQ8AXpFp8Zp0vdj+vo9i2dYFD35XW0CsmD/x46Lt\nEAYNBKkiDBBr+mvg+lIPwgwRrDx83LPYRbPUCoaZrDT+J1Sd+E55h6wXt/Mo\n6OKwYLa4Fvf4Lgf24mNJjOtrOFPXkiHyaqAXppF+ADOgXn+xl/dJNa7Eb54e\nitDIkh6ZOkR5skphGDduLPGr814gGkrazGSqmZwOiEy7rDbrNGVkfTee2SFI\nw0NRIr+bVGkfvbjbm1QCX2/c4pEBeCfx1xWxtHY0TcwDyuTLh6XRNN9nsxJG\nNoM8f8SFhOWUU1wTe+kfietqI3m418rgIy8phSkEppn3hhLhQkcj8fEtgPxw\n8SrQ67U5BX9dDqBYqCUFno3UvWaUggpsJldBcQCQ9VK03yYYgKBY96pBM34F\nX5MFCU79e57lvrxH8gThaAccdgPbP6TeWbmRshRBop+Tq6b9si01fcCZ0yR0\naYj2\r\n=stAi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCkAjQoSw76EZNh0DPbR2OMO/hS9r0VbcofxgVgLZ+3AiEAmfPEWQETe367L35HPg05yeDV4G1kTjPlV7sIEoUf9i8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.5cd4bcdb.0_1626469922527_0.46615404172392405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.2b133cb2.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-circular-progress":"0.23.0-canary.2b133cb2.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gNmo0UsEC3N5UfBQPJ071dDhY+Q1x2OE93JQty/oX3MAOrY4keNx8ul1+nnEOqP9DPHxZgy4pF2ZmxUT1EDIrw==","shasum":"933e05fe0bba015ebfc1804ec7d4f5323040a6cf","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.2b133cb2.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLoCRA9TVsSAnZWagAAGdEP/jKKHTlU141WA/HTU+yx\nquDTRoCDdB0UUZP69aax1pNYkOwU8gg3ndTiYG3nLLAaQ6XA+zAhftEzKDOO\nF6V/6YJ+cYbbQgLllkag+whfPfoYb3vnLv3OuunfMQ644mHBOvZt7tlHy8eC\nGT69q0uiCZSUj12aNvSGlyoRq2ee6RbF9g3LyMAjXu8etamkDlxVMlq6bbW4\nxIUBKHu3zKLVz4Ex2yqGOfGR1V9ORj2X0wDw+dtvkcBelnwu0IJcie5KrHp+\niJLxeMMEEJraskQYNuUvJeYcDZR+h4KD3nsD6SoIKBrcHMBwzdm0NxUuKvZT\npt114Azhwgj81tn4kgyZXhN2q27/m4GVEWWrk2PshftH30ntVlrrQ2LUe9tb\nyFQk2pb66ez38tTIZPy+uU/OoUSeiW/K4oYpVpsBDolfeE0ZQEGkIGs3mFLl\nCGkZET+Q12A/R/LRfH/01TSA4xS71x0kcXT81rRKvU2EmYheB1B7evnr8hF2\nuu0LO5v2HqSLMF8O7odiRPwQ8KxSBFbUDGT4xvIfq5vrJsgQp7K7qC6Hxbsw\ndpf/vV88j5IEUpFCqMV+iQu4VO6v80RDFMtQADk1YNmbh5EECeBZM1W/v+m6\n6fM1mFoQ76xMZaZVhOJhIqpOUr/axeFMlLzoyYFRS1nGSyoW44tUrgUiNo39\nxIYr\r\n=eWeX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7n5t3RzMpEcHYT0+mwdY+L2olWqji6oVk2Q11flnhDAiBwrUaR1DRnXwZWw/HzPuufWRKCuJ8PRMhd8mqT/smHqQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.2b133cb2.0_1626473191874_0.3445787656997217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.ae4f422b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-circular-progress":"0.23.0-canary.ae4f422b.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wLfitYJzEzw6wRbHYA0HTPC67vLICPswjwEbeNr+YSSjmTTSUmmlflfnPAQ53gGdI//vkMBTljGReH4KLuXaog==","shasum":"2ac76f154bc534b3b6b70c1fe6108f66f20ce36e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.ae4f422b.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwYCRA9TVsSAnZWagAAfJgQAKBpwgJyeX5NVWglRk3W\nsZE2blZMXpvwaps+J0lhpBvW0+rA/Ms431z5le/AT+GFtdQkSex+fNsBezbm\nRAnMvYchEsjkPe59pTPfXXSjBhVQJhCaEhdTRwtLQGSs+diMs8biDWnzOIf9\nzdsjmITj/GknkzC9rijcCPRmEk625P0ZT+3xw5jgo6LrDOCFDUxPT5dODWuq\nv9GcYeewi1g4XISfY5hoP7BZAKJpyurmBaK/f7YoX5T8/rQjjtwP9DemW3X6\njqyULLtR7+2xxPR12guAvuQ0kZr+rPPwvWuqJmgU/c69YNuvUwriz6lSsu+X\nCRYYsLryebRyU20J1TfyGRfSTSs7aaLtqMNsDFbSH/saHN9G6LmIFdooayRl\n5Fcml6qZypdMiFxRF6vUOPFOg3wnndxOkGWAEtOAEBpvq+FfKTot3udgE3Xd\ntcCSHewMFnhvXo7NEZqQNf5WyQXN0YBf7vKcJpfL7NkL6n7yvNmeW0WzBufc\nDnbIGLy61CGRo2GEZ/c1/bpEm8XkdYoJ9+vTbO0Bf1YQvFnQt2z+4Y7Qo1nS\nh2rEc2qc18NAucKWJWTlq+HsEFu0E33HKCKEfMFiCMqs9wUt7DdbxsbzyG8U\ngDdNLYjdyaluQBXAqH5p1tu6AYv+AyZEalHVi0cKCkMx1uk3Yrz3f39CGp/u\nfT8k\r\n=UjNt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAbOkroD3Jc0V1aY/1JLbvzH/NtPASW230vOsv/NOzUgIgedqkNhkXjo3i2V5HEjZn+n64fAYHzmrYNpShJyy0OVA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.ae4f422b.0_1626479640797_0.2729075576836082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.90ff8057.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-circular-progress":"0.23.0-canary.90ff8057.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/yLQp+2S2KCR1VdBRYFaXe++39JIkjm2Xzuv7dKxZzTXRREXr/jmLDXT9U8VZFvoy+rvoNJv82YT0E/uvoRIow==","shasum":"27ecccae45299c430cf8bd569b0667ea52c0f8fa","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.90ff8057.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YchCRA9TVsSAnZWagAAGOcQAInatm86T/U2YsM4C/Ne\n6X58PVqZTMX/2rH1mPhqH4wGD+CcZklaFttxYQNin7kwf0h8ASpDStvwIpVh\nNFYXEZTAqJ3xMzs2V1/oM5+L0eKWFLEfKibTUITGj+oYqxQhZCmH0UMPRVo6\nBOkByC3LhsFUj6pEOi1NoYptFBwXtvTRUVFS0y4Eu0LgJRDSMl2oYTEijWVB\ngANpWyvORz4qmO4Cr9+THw2NLKSCsllEmPoylBE1Oes6AnLj4gWeerNCFriH\nIJincLCAo16o+08r7WkksgD3QW3N36HQ0um7cnWBErZQ3oDrjdE3wg1kVTpE\nwG2bXeQD0f+tLxA2lBwSPhtHrzfSzM0bZ+O7Hx+mhf0ATcqgpdpDywFwZpfc\nxAE+TT9X+o6RdeAsNNe5HCilUF+v4bAasfLx77bEAov/ZPxsw1g5j6syoGPC\nR2krWryhLg0YqcDGxXpWEcNhOeG9uYjUpAuhZ4/l+lfMFHjEYj4f5Pym7D/e\nYrn8Co23J3ikxjmnYDeDV8jrPvfSYA/XlZyBwwjtZo1VgyS6Lmxy0c9XpTpZ\nsGBYJAnNxs+ghbzbalWt41nlL6EBcxzjqXaM5XjZNtSHcflXLJaNFTPIQc1q\nrO8xR2iJgoq64t1aOFF9M7STtZcMapobIDyRbqoA9JcWdbvhvOSMgd9joLJS\nDpv0\r\n=wT9B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk7NRWirE9GaVitst4Askz5QlSYbKCvPEcyp3vdihT0AIhAMsMr6rmdq2R588R6hXuaGYZ1rQSZNb8T4t35xwkwgsQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.90ff8057.0_1626703648921_0.7180182320348021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-circular-progress":"0.23.0-canary.dd7b75d1.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bUVvDI/Xu7owzshskj97rdYBCovy63cZQJOihI7N6ND6bupx0fuQ3uVt5mTPqpY5lShiSMYY3IqdLpU0xFYOaw==","shasum":"7a4b6330bdd143e1576f9cdd9b2a26fbb21c02aa","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.dd7b75d1.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btuCRA9TVsSAnZWagAA82QP/1a3bFIVBJncF7snqTV8\nGEAEEGA37XvxXM3oAyJObOh7787VmUVqRQIj5Qku0DI47S8xEgSfc90QnKmT\nJLbP2SIfOPIR/FcLZg5ih1aleSAYe4Q4EVSDEc/P7qDrMo4rKyMBatoHxoQV\nujR53R+3flgrekH30iOK+2DIKEKz3CMOFbHOPbUgUtXmI5kEzfu9C/GkKOI4\n0Zgo/zh23lbbT8unzVcdruXgEYJCu/3+Sry0onI9PtrDmJo7jeeavORhWy70\n/4rgbA11jiFmzIHZO/JLTrM8uZzXroU67Q6uD/7Ku6wmZXCwx/yp6L6wuP7h\nAmlfa/NW3zcE52gG/tHtFCe+uHnQWgwp8/pNcgqs+4GgrgJ8OW5a2yfMk5/8\nAwlFbY9D5/SK6I1dpS17Z3aLngpuoY1XzhM5J/U+hrHYZ0Kl1VPwod2RWs/Y\nkEtvirAJ6E0sedOEFgh/H1G5a5vJJ8pA/6KBjLkX5hHIpkv1vcJFHDjTXY8U\ncWC8sb6nuHyWsTVWV+A6hSzebHemuPWuCtCn0aoQE5Dy07X/wYoy0ccBGq6T\ncwNKMpxvaGpsJ+M0/W9eohHBmj/UTMxsckgQ6P0ABU/cntbWsDfJIRrE11O9\nvm/WaZH0ZocwWaMo2rSDj7LzKthDy4K26ZH0REkF8KyldCOZRz7/9zGM+EJW\n16zQ\r\n=8Wtw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUAL9VSzcqQsR4tcStrmgBb1wfrE/BtIDOcDua6cj5pAIgLslB8azjDajMB3vKS+Qy9ET7UIZW2MAQoDOCuZTbGk4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.dd7b75d1.0_1626717037211_0.11921273531581589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.104debd5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-circular-progress":"0.23.0-canary.104debd5.0","@material/theme":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ovv5IEth8HF7dRnsd7fjwlgqkZgEBG+a2+S+vmhNKE+2VAuQr8Xn0QD8hiLf1fo61gIJniurKSA1ZQ4SX/wEAA==","shasum":"6b5285d7254a9283b3ee829a65eebc88abfb504d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.104debd5.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJsCRA9TVsSAnZWagAA5+IP+QGY9P0kIrtghPb0v29t\n8ecZh5zirHXOw6jFhgHquk2zYpc+aHZtf2k4Lraz6Kuk2nxXoobrv7H50x4V\nWvApgfXYjnS0BeXA8KKWbkNWq6zDharK/eWXSAMmKkzBb0AaHv0w54oaax7o\nTKIJiifIIff+TIbWzXHYikev6XcNMxbvVLhxMuTgrh/a8cvV+Oubg3dE+Uzu\n6eRz/x/djmsko8WenhbCjFaA4dg6DO0kM2BN67dcWIEP+l/EUmn1cHRGeksf\nKBvyCmfYCL9qgnfbHK4aqGw0j2SpQ9jo79u4c9E5mN8JtlNQCV4FXkDdfTpo\nGG3LEkTgvoBq2aVY+Gw7dfAAdT9GLboOPlwNct5GLJNKiGB2B3K0lwpYw+Tt\nSMSUbrShvuTEmHbBfRbe7Wi0BwHisunFcPNWmKhWU1u9Y4htXI8C6lqAYx6Q\niCUhIyIjsTServiScBst8FlufHEw8hY5U/F2BGD8Z+QRRHfk827BZv5pGwta\nB+xSPLPK5QKWzgV7Yo/uyOvWI83R39xjgOGr0M5Xvt1danqOFs5a7oJ1igpC\nGNR4kxKnlj3JoGW8LxlKO6I7d9elxUmbPevbxGYtGRbOrFTbaIZiFpVk9JXU\nLnCOMrTgxc5sczk+143/Oq6FjI6zEUaD8xJr0df4UpE9Fv5+6u3ktxHUR6Xk\n01qL\r\n=iypu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVWehoS6iPFl1ErPGU1J01u4oSLVHSOhbZyy4rHoO9CQIhAKa008nvZI/B5oxTxEPTKPqHhr9hGEHGggJ+pSVDu8hG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.104debd5.0_1626735212286_0.5006414212577042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.4612705d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-circular-progress":"0.23.0-canary.4612705d.0","@material/theme":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m0UHcOL44o6gFI/+5Dj2eF1RR08H6KIu9zECEmVuA713fVExa6gKPkBIQ08DXwHUJ+fzITddtzzLwH3HyvIAqQ==","shasum":"9aa12875480bcafdde75e99d03466bdf8990a94c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.4612705d.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQUCRA9TVsSAnZWagAAprgQAJV/tbwuvH1Ef7pSAHdX\n4MBJjBrDRUPBkBeBcdVN95jBu8SNTYV0uHlw5MPZ5VHTbDmNOe3WKv+lTaG4\n440NC1C8McVtMJhOcKpGLIWZAUUNYulMY2NlLuMaBg3BwgX9hwV7CzfoG3JT\ns6gIqmaSTnaZA1nfikTJWrpuGIDiXL2Lxncjh/qwh9u6c0cJFZsxnvUYk1tP\nMbfrWs53PtwYyTSt8C6pLyjsn6aV0suFgrbxWCe2xo/015AFWuveCPegS2g2\nSKAT3h+/HWcpBTZsTfl8DrOrllvIMBrnM3wUgEJbIQ3WB0YspEUpXGJJWxca\n99ESknZdqga1eoRleUkzloZH1kEnoDw492Y35FFyPxQ3OVJUfsXomjczl3L8\nSE39VEN6YZ7FzXnAAsiaU+GqNevtjQ1HrRlLg95kB5/d20/sLirnXUK+k0lF\nDlYFaQ6pMgZWDDxT4C9+t8YuoJLBmptw271ZNJH42uQ65/gWZeFmi84DX8HX\nBf0XomK1oQjN82I2UECBg55oRZoqup/dX0ZUpKCwiPBfbpGEi0vS48msEDgE\ngYvwRKTmhQOSWMGY2nr/EB7utDqdfHJ6bcofFH8zoqGIwpffpVpiv0GKKXfa\nV8hjAEI9ei2hzUwZ8Jt7jyKo+PNljjxRztIR739XdAN7TADJg4ZjXD0zT+9b\naU9B\r\n=emzq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDVPZYVyaiMgU9cDlfoUC7HYg8RRRzxrYyNdhoxVDq7AiEAjEVTu2qqgUszRQ1dI/oLJsFi8MqsN2QKyrMcbJ/xWjc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.4612705d.0_1626797075903_0.04509083722453511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.b36502a2.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-circular-progress":"0.23.0-canary.b36502a2.0","@material/theme":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zDnBhGBbM9OiRNnxGWkr5QCzX6BaNlB5nMR3TgUHaIFQZbMu9p1OpeOkOkLLbE6Rqqbbis4PmCg5Bk0MSjsVGg==","shasum":"9ec06ce3a6487cc691f4108016d15591da0bb06a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.b36502a2.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KD5CRA9TVsSAnZWagAA5ZkP/3f2EIcJRR1jhPqbH45y\nWWG8bL1TZnN33bwi6LpBCf69RNK7nFosNQQ4IFoAwAWafFmej5wJFgxSsyu/\nJqzUkCR32a9EU2xTLxWW3dkq09GleuNbpV2jS3XeuFhWv4GwZzK1rDQ7Dje0\n3jgozA5V5r1pnJeLKyho/nnBj5zGni6wZFMoJnMgpYICsOoqIji1JYmZPd5l\n2apgLPqwgMNpNYWqWy1aqZgf83dnTV2+W1b33Baw6TptPicNDOOX7TjL1coO\niJOFe06sDl0eqV7TfwennwetB+71gPYISHe4odMbhE1AA7Lg1Br4G6aYqdZE\nRJAa+3yk+54MMje5yqgEb7lDtTO/Rr4gq1yKKN9IL0ENTQbWBvfhwjy1oKNV\nWfuHHmoq7L1AASsxFroAqQqC6v5pWZt7zwnbQzp3h9vAktnHbIgL3fPA5Wbf\nxCFSPgLJdslMgHyAvh9KJrqHhmISc/g6hURyMq6QLr0q/kYK41Ryp4bYLqAw\nLxBmaN1WKwpo1AzGAR8D/qHciuTwscnw5FyoITstIxX68My9UHlqxufOENbt\n5AO3K8QsC+2bG9rTQphH7WtcGQDr6Ol9pG+DXpDZgpcmXitnpQhqkuZpSFAo\nkh42s6FfVl3jXbUNxLaya8n/rt4V0X0RCht1AIedqm+KjqbFBZmTsH/gJnrb\nNaIn\r\n=2YHq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2U9UYz1rZrr9uldbyXTMOAcj/QYFUpghDaKC3YC9DtgIgSj41oNbmub9K4h8nkOldZeo9XLrhlTVzKFVYwxSFogI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.b36502a2.0_1626906873224_0.3555988974888584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.2c392ab3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-circular-progress":"0.23.0-canary.2c392ab3.0","@material/theme":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tHkNEZWNl+0KW77LtfUxV6SfLsIiN2yA/X1SYf/XjLK97aHjG2V1PIspBQxPKwEyMNsYe9B3+B4sPgj8tl3Kng==","shasum":"52412a16c59166a07fbf166b19ca0519a1fd4696","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.2c392ab3.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZECRA9TVsSAnZWagAAimAP/2WmuS2ncpp6/3+PPmnV\n6vAcuwMMHgJCiHHuEbrjBbRNZ2P7ytT8fNCk757DIkDR3j8vBPxLXoLz6E3w\nPpYxPle8WUSiRWjAxFnia3ISholfb4TTfzep1nonRgDuijhrZw6j4KjsQMXi\nKbQ5GDgYcYtInFzRbEJ42gcWnrnUj8iodELluNUpdzKMwytAamd9Kx488www\nNqJFT3fGS3Qpclh0U8+6NKoeo5tFKBrpwTpiQ2kbgrWsL6Nm6wOuil4W8Jk9\nyGJu4abTWVxsex4kGig3dOJ5Q/Yyp9y8Ddxm1GUtyEEaYQ1b6CftNmYIwJiI\nySp0gpMbFhe23+LPN4A/aGRNHpx48ArgvlZVcK4Wcf/jirseQE0NH4Ih9C5N\nIyHLLlK8phJgi0smF/t3CR0gOUN8Ha+ikpXS64vZjJmpyU07bNjq/AD7/H7o\nu4uhwOt6osSy7Br7HyDFzR+oekxHvPFJBjBJ0npxJz7u1Lzl/GSuowx/4pWH\n3I1RZos8UmKcPm8hGgiRssV3Ihzu0+/JIQdLtJbQB81Iuh86QawGncgnsqiF\nY56VI/3Sa04vuFIvBbasgXFMsn8SqHfCgrh5dtDznaG2HGM73M+HJPHVQCpD\n4TgkfkQ8kIi0MMaVyfXYpRrX99VfyFYvZ3l2D15JPJqTy9P+bhLLB5T4bpqi\n+QlQ\r\n=37tN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVbPZ07iDQpO3ciNm+58EdLLLr4fB9/Eln+hNEWzD/nAiEAnM8rv2Fjtjn+3OPRyuFPPg9IkfDn3HM1vi7LszEwLf4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.2c392ab3.0_1626965572595_0.5488113458497688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.e8bac95a.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-circular-progress":"0.23.0-canary.e8bac95a.0","@material/theme":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E9KcIK00RFQJbInaH4azm6u0q76nJE8Wq0XGuk7gnlwR77KshT4oIgqtX3vokr3nBYoi3SLFshwNNxcgCaxLPw==","shasum":"58e0d8078a73c7729d2878cdd592774e99991b42","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.e8bac95a.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6DCRA9TVsSAnZWagAA8w0QAJwKZOmDYH/T0pafro+j\nMaTbqXnAXaEc/qb68DSmPxmViH9+ow5yN0DytxDd22Up9xoobZCNls7tbjoR\n59TWgHdV0kqgzdJCED1BRQg3Fdtu3RKpmAm5TscHGFFoKF+C+678gd1KqVxe\nMFUfyeofi0tJcFerFU86jlFzi4CEwr07WCTt2daLcxvZ7L5JcFC9f+M3v2MP\nBqdiOPHXZXrqlCZdv2zJlAfcNyr3AZZP1h8RUwcJyvvrELOJ+pi1XK81xGHy\np8z2XQT9FPOJRFplOzMA0TA28BY13hJtgMqBcTZkU8PX5xSFbLVUGfItxdE2\nc5Ayfz8S6oH6iuxOldF6Sf/1lWG6D6wW9bsR9ZYsP+B2GoJtci+LH2Fk1OUh\nkZLsMJb1TZznVpcJUQtwL2eYEQtQE9cwO9DxqyTUVLSzP8mgF8ySslGdIEsg\n0wKSEQpdVdGvC4DZI9sV4Yz6djkldyHZhrXY575Uh/CdV4hlUm5nqNXxEGej\nBir+7pJdrAy6+kO4g3ReUpTcBD4fsZEJxhCr29v4aTucrAKt5eo7bxwiwuQr\nDdT8zIY+urPRmJ9POdTprE2zQvKzJ8LnZKhFQ5eN0kZ7/1ohYqqa/tqeWBfH\nWK8W8OOmzIPxrXNPzp00TGt/M+e/HaLm/zRMXtO/x2+auZiFr52PTbi13QJt\n9NwI\r\n=AVv2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOTplOLSoQkduOE+4B/TtmSn7+OzvAnHTl06QcxEK+kgIgPu01XN0pDPhgCKayfPN/MrF+dwA9inb/vlHXngQqrXI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.e8bac95a.0_1626979971735_0.7652859919942407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.38f29f8f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-circular-progress":"0.23.0-canary.38f29f8f.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a1icwNIxEzDe+pp2iiZBjpzlrqwG15glpdBQQquDhb1DUXUPI3rDMTiIusoKx0DTFFPEQMJt0tY6Rm7XAJ3JDA==","shasum":"884a664af69f0dfe404778d2483be94a00de5108","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.38f29f8f.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdfCRA9TVsSAnZWagAAdXgP/iA6CtrkUhmdisgQjKaP\ntNFSmOoJAvNz4UYOXTFD90DO+ZtSlLQo7HFeUtfjsXGlTfEiE+MokLE47gTI\nYjIqZdYH27z6WUKnsJdkR1pu99D64ImSBHk2QBNlBNd28R7h2LhmcOiYHfmA\nGsWP2vFSqULHNOwy6IG1n64t/QNtcf/HvcfIKai9z7Hu4N8ZFL1K1vzBc0Va\nZzCWabx3Hf0Ygy7IZGec3sIeACYpGdAj05sydJMqEPOqfQ1/cfEJmUU+Lzme\ndzd5uNliYRJwqV72Zb9uoFDO3G5AvqnRMcMUH3Kt0ALLHwtVnxKyWvDKLwhe\nRqTPPVcslp/RX9jTGiP/QXXVO9qyen7Vnu6OndoUk3IfWjMWuxmzXg/HNOer\ncWx1rgiBs6Jh+Um256z8lpIw8cZDnFXf7lP0v9RK9+BM0luq+VF5hxsLQGWW\njhu0QOk2tMiAdo4rO9UJSQ2EWm2ctK3lQvyajwvX8v1gmrFbjw9ajDETVb5S\nmSln85KipAkmOd4Qo+4lfKGWH1WKImwolO9NzT3xGfCXSHoE2jWgU6MDhxbe\nDLUWp6Q8tSbvYAYYEnA7n6pHdGUhDa2So0Ue3dFZ5zOdjkuKfsH0IqR55IB1\naMTBsiDR8eVdt1I/5G06xQuZwTTDgxVfvokkB54f7eNUXQRGg0KWzDFr32tt\nJ890\r\n=7/JY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDerYsaNhx8bPt00eqPPuhG2JxM2qqjNEtFgn631O3TagIhAKSTjcWKekrSy/cBDIzsAZLgTwhYFBQsm3t7KaLeDhAi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.38f29f8f.0_1627064159521_0.366151828108668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.e0693475.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-circular-progress":"0.23.0-canary.e0693475.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-APBJDM2VGaipWX6jy/9FNRkG7new8K9yOQzglseA1cfKG9pkf4g14ENm4JRvW4+lRLLMR0ioilVkVS+y2whsbA==","shasum":"dfb86ec59f66437581e2c320e746a830d7cd6905","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.e0693475.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDICRA9TVsSAnZWagAASg0P/AvyNhZxS6KJNb4azD9u\nFso6ReqCqbwbfZgXyGsksXhxzZrZRwUb24uHJwyGxvX1ReOZzYd1cu2OPTBY\n6yEKids09s07+YtsQnQAqqqHtIqIkHKwpDQXBvNggzjTStBxAiGrtns4RFwo\nXKWoKgJfR2ytQODU9eDcNT0sUIxRQhKY282ZwpnRJB8I2SasNdJADyS0t7hB\njUanKcTHTTd0tLzqYDUG11rJGK+OnesBs5H6cd/XDXJqOhSWTwZRiUD6Dqz7\nbY53UmFls4HITLzjUitPvdOt6jkZwnnJWGgbTkwRAGwQ2lkg4CYPWB1vsT0D\nDPNESgShX7TdX7uajCCEOpl/Q+BQS1/eh/30FA+FBpyzuedEhQmeHdJAwvir\n2kbrpOEWVpauN0F7V95Fvv7pfTQSXRjPG6N1GC1auWmPhAXaCKnz8q5/XZ4z\naZ1NUH5F68bSNtS/zZk3crXYNFZS5vuIK7FAnvGIxG5w4pdcmImEtR92ry2Y\nNU6NvHjum/IYcZG+JIOlnRGSUx21dI2rZKmM3xndNmaGNcLmMgCDZoDyRbsL\nMYs4BpW0NEsfwEBbzaPPnueWVLU5EikYJZzpl7TqHrOUsaZQZ/xpD7EqB9MJ\n+OBKXjKBK1XSVhP/8SEnHr8hSHBzoHzGp8DBroADlBkqXIUlq4xjYkLeFI6m\nPiMk\r\n=OcmN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0c8prVXbT2DAOEtWJ+LfU4SYZWM60T/WaMwi7IeYwrgIhAM84MHbrTv6nOMVKjcaIt9qGjNIJu+5mmWxsJqMUuMap"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.e0693475.0_1627066568227_0.19812180280422997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.d595e030.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-circular-progress":"0.23.0-canary.d595e030.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sZAHWbp5hd14a8bjf7qWPpAZ4CzzLJ8hfnXJZ7D7Odo6D/2j4hxaX0dAOvNxVUoJB26nIP7bPmpGAAacMKRLpg==","shasum":"22e4c2523f90890b549e0a70b3cff42f38942cd2","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.d595e030.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yw3CRA9TVsSAnZWagAAFZwP/0OC2ZMmOkGcXHRxO+pP\nEyHGR1DcHmA/rJSb04rNec9DE9kT5NQNgOyo9FIMAtP+0H9+kQLG01/kRfmR\nkupdoK5+q1TEhIZL/xn671UdVGBSttyHZvGqLxWsnd1OjNc8Z6b91GLfirP+\n3M8Lk/sYmMO84uX6tnkKBARoH4gD0o5m2jORCAgy3kLyFgNWTC5z70z2zVGv\n3XNFKNw4jvXbnL3NBdxOwZh8rS56lQG5afbFLKr9Olv09cv85IRZs4pzqXkk\nGDrtS4sfv7MCOgRY83tRvwyKRM9qd/Nx3w0AA7N77mjBgYuFQh7G4Cl2gNwv\n7F8r+BC1rGweFV2JqnEDVZPQ9pcys49J0k1mRI0sNBBp0qOogSgiUNUXzRpj\nvB77fJakRojfGX8CKsyfbvDXMHghc+W9MDQW9MLIIhWGxd7UYjFDCvq+5JbQ\n/d5HfC788Tj/PBSyxTpcny/ZUio4MUW3WyOzoba0GsWGnnI2X3WZbMc/mLMV\ndKpwF+EYNriT3W6wN/hAb6E8dwquGegK8BeacGwnbiQIjA16krn01L7M+ZFp\nGlbmv+PvDMsMLSGPrYcDqM3MyVGYHSOsRBGpxMb+/q8JhVdq2r8VIoC/B56l\niJtlP9m3jQn23LljV3DdNbPEBFL0zuUGMMAEJGGSzA+w6q2KcFk5PoShslqr\n6xEM\r\n=rhvn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAqWVlnM+J3zv+eLuvOKYTY6BLEqL43huNvChdDhpVlgIgSHgdLelQmXCMmpSgZWwqumDhJNHYEEijPPhv/Vh+f4Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.d595e030.0_1627073590915_0.6208368034719629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.fe7cca31.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-circular-progress":"0.23.0-canary.fe7cca31.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G+ZHJ93F1BZZG7U83Rj6zRiOehzdhWcwumDMNQEyCKwpwJZAjr99L5Q5OWLpWxjkFHMhtxcmvE1BAKN9Q1dTZg==","shasum":"079492f84f2cd276584b1e756cc7b3e387869be1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.fe7cca31.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsdCRA9TVsSAnZWagAAa9EP/2LhTr9/Nr/DYZRNvqcQ\nkVAN9UrbCWURdi4TZARKE72ajBcRB4SbXhaMHQumKOjUUfc/nfGhog1Cc1Tc\nBm+UptgmNUzX04jpw8x4PoBmjKRnhwXYHKzC8PHzmlehfB4xcoOk33lK/Iob\nCEfX9FhucQqt6PqdmBLV853y4uZ4gkUiffkQHMEbf+B7BNHmev5YOWohUR8+\nEgZT62HFQ0A//CPBGMrmtKo0RvHMZvEplHvU76QfvKXVwpYe0rRv05Nya1ia\nIAo0AF5SCYLbP3qOsP9+sTyDbCtwpRB9LE4zrM8CpYeXpKAvbr40ivWxP6Aw\nIW5CFrgqpSXcXmMdKYL04LEDrVMFOwi6WDAV7GXiJ9zGZjaOHFyMPbAcB0NT\n4BWzSN8SNT0GToMnNeN8lI8zN9JohrnXGVXlULhBwsw/udl5pISV92Z78uOh\nWZwYX+SB09es4APvuCRaJDM1xFPa8E5zKzbpP+4Do7lV55j2UnQdbxw5OLqu\nJNKX0IbER76ltzTve/8mGsCPlPwu/IUMSQU+zaRG4/UW0jHETK8s4Bo1A7Aa\nT1PXlcb9PD2/5suM/IWsg0ZcXclrvYdtPQ+gX0m+5YKCnG1d3E8LMfWpRHiN\nJStXPxHz/FlsAJMrMkOftDlHZ4nYA+vIeWMHz3ZjvwEJHSe782LfNUndDDao\nTCPu\r\n=aM8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5FI/Rm0GOMQFBYDA3t5kIlNRIeoL0yMI2k7hOF0MxqAiEA2/I9CJhBavvy/6IUjdIgjRlIqgAybTfB5YKFpMabv1k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.fe7cca31.0_1627077405519_0.9554915569278031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.fd9da483.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-circular-progress":"0.23.0-canary.fd9da483.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F+xNbJrhA1XzC6xMBC6aCIuKOsk5HPuYNnQV3yonApZ4CbNPnbVrtozq7DBteCrozurPWlPNiO/CZ1bpkT9NYg==","shasum":"6958df0c3ca41ea2bca8273bced3dbc8cfccf371","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.fd9da483.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygeCRA9TVsSAnZWagAA1K8P/jmkKmqTo5L5WP2+aqeq\nDJtQFyAJ8hsTGGoYwtrJduYDXN6XNdJwKNSZ9597DcMwAMQVtBa7j6U17QKj\nhU0AN6C4mBIgVlzzRnNh8siJMZXdtIoeO6EC5ZVlZkMbXPv8pyxcibxPTmrM\nfBSw9w2VoEekTmPjDiRPqYeostSnFF4P0FMC6M4LOeYyCar2J/bIBnQaOm3X\nONpRWjrPU0u2Gw9OccWMebY+041oNnV/KnyjLP7jDGTtPONbwvN3babiHJ6X\nxCO+ihy2JPhOxhlfehimeIAFxWtlg67sV4h0u3xlxw/BdMEEoZjycjxU2Td3\nN20B8XuiRwh+lw1Xsw5fcwkWwlnqDWpD+jBMKweEbalyTNtwr0oc4Mwt55rM\njCIJ+G5xJjVB9DdTIzhywAI10vfR55hx1WczRDyp64J1g2D0YuwK8eOtm3u1\nN/M2LYIey2j8qhLqqP19X5I5L9pH/hF2BTR0UTiGM6L3wBUWSgMSoma7sY7Z\n8h2Qv7EB9MSF3qmQSI7sa2Uw+8tzI6Mvfc8IgGiH+KD49o2KjqjxUy/Umxw2\nN7yPti3J0xWPNzsYQ53Ie1ta+3/T96aNPdHTuVniWzprus2qi/xaaqwzu8f+\nFKxqQ57IndNRk8iB3KeMzyVRI97CCB+WecPtfG2HuUqXhxM5yL0EIKIOhv0O\nujSn\r\n=hOQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOFYbyqbWIH5ngnRpPc0roz3YuGu86Rdk+9TtIzQfjLQIgb1rZdasWdivzyDpw/UykOUn+AskWN8dPrdNaECYILC8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.fd9da483.0_1627334685984_0.682144829860114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-circular-progress":"0.23.0-canary.8a4c7e06.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iMGxknM+DFTV9MSkGvNtaOri7BDNw69GhhtWolxi/AsYrNzxGBe+0RepF2c2c9mi4L7kZDuUXMuLJ2A/gBAFCA==","shasum":"82f96fc5c7e41bd59042b33d06c9c566f801aa33","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.8a4c7e06.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zqvCRA9TVsSAnZWagAAPscP/1xmimCB69f4bVvzgxl6\nG9/4+m40MT1v3Ez/3r+HQDb4ASEjvH+flkqRzf/Fr+fRRaXd84la16WsyBaa\nsUO42URxp7t3X8dah0wqBB+ZTXq9Ipo7K45khP6BUcO9UiyBkjSOL88A9869\n3IDPpia8V9OxMyiIKdaYryFy9dx/77x3m6GqR9h+dZ3hOcFV+OAbQdTbo/l6\nqUFFV5KPej4syfhKd+Je1qhW72K/tE9P8LYsTS5uUw+SRdMCQIwidvJ26qA2\nIiRESfP5/RQPX4Di/EHJowK9j1nSBXn3uQ52F/9G/5gN+YPMU/+0dWhhCSvN\nRISih6RADQZzsGet9q2kyDgmxOOqYjBaYlMqM3I5AgA19i/W0x1LthWODXdJ\nzycYdgK2nIEWkToKWZmjWXCbbybL8y7IHhlSZB8wlvnmgESbTQkqXjXmtyXu\nIbKn4Z5HVNtDxM3cLvlt1lTRiuJ7S0p0vc0N69V45P+VRfc2EGNt5ldPbDVB\n3/9nYzRVBXKvbbPD0nBjmhJck1pkbnYhEhoq97xpwwgxGljPKiB41Hr3us4E\nzwxpfOXLeDJffZPKrRnjEP/HgripbrKFSZM91jy9Dgk82+U6/Aor94lZGTuL\njloX3G75H24XA8oL7lDIkAVBj7RTwX7X84FvsqqhZ+8jvTsMyzxCmDZXd9Mk\nE4Hd\r\n=4Gs6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHu7lNWl7aoYafVOOPw8/2hw0s1WHBAJLiYU8V4MWFc1AiBakkFRrcO/MpGnJ9pAAToWGgZDFHjjLF7OSWUl41wDWw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.8a4c7e06.0_1627339438997_0.013155839375194489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.5b395fd1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-circular-progress":"0.23.0-canary.5b395fd1.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-89u+8HhFgSVGf5vzEDaEZIHZpGAxl22PQdY9peEDM31M/xPCPJO+XWgOkPzPTtnI5rMXmFr/ppHx8HkS+jArOQ==","shasum":"c75c76493c718c7ad91621a66a3626d949275def","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.5b395fd1.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5MCRA9TVsSAnZWagAAdTQP/0XX0yntq5IxPTYAjdSZ\no4g9i2nWUyJpG4SIiWkajnWDourvUQn2kVpg0Vvi6OMp7gcjND8u6FTWo0eL\nKESDeYLQqq89t3c23d4my6dEMRcU3ZseGxMPoTNRxnImrDhv8RTBO/4Xmpw8\nfX4/D/GnHpIZNxxSnpGMmq8HUzIE70Ti3LL95UIpqO6EXTRD93JrVIsRi2Mp\n23Q84TgLWEJH2bbz5uSol6YqbAMsgwLzbu12pZcxzv6PGpMcncsDUpwnh3OF\nWx4zfgIoauS3pbJzykpO8feP/vrd7aD6/8ynIk0YfIGo+l6u40fpOF1yJ3CA\n+MZZVi2S7WF+7zZpIF10goGhuUiiUa8CXs4YbkBAEv9ZRTTWcCXGdhV9p7HD\nSs0LuuQMdYrxDZpNyKY7K+eTqgCNTdm7RhW3Kaynl6xNy5F0uYB2AgbhyBI0\nPDCAIKpLBtiT2B+ueGiVJy4MfNdO7l4dE57nn+7Vv4W6QEejQHCGSu2/dPNJ\nqqZQfsjSRnfka/RPqM1RhrT1HbZWuySZ3Utn0QE6D66/D5kcN4LADDKUxiEI\nh+xFaX+Y30tJSBIDaRyGzrYZYaE+RxDeZihG4Dy9UBradd7SEbUKJxArlW4i\ncCGY280aqgBbNP0DWCZ3ml669oEp2iaksv/xvFEuFbsRHDtmkO7MS4dMTsop\n5uYD\r\n=X2WK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYwnLoYWYPDPlr7KhPDRpSdzWpC3uSsLAIR0XM+E0RxAiA00kThztkKNL8+SssD0Hmd39vYln4MPx1HscfjbH021w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.5b395fd1.0_1627426380439_0.32078317656446287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-circular-progress":"0.23.0-canary.e5efdcc0.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iQfrGd+JvFkdbQGqX9rbtdC1Nt+cDJ/Ik79vydpjUGwX/AXUPX7Q3zCt8B7JZgdSneLVITbXQtwIJKNvoE/L0g==","shasum":"e087e9847c9f5426bcaede798de6c4fafdd659b7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.e5efdcc0.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJICRA9TVsSAnZWagAA19oP/3ho6wmO7E4QXkdG3TDI\nWZamb567B/2kTB26hJsxG3vQNYA1w2dMWUrKF/sgd0bx6EtRC7+ceChcrFCi\nIGZBI5FcIzkn7axzyL9EbhQmLuGk91DrZYo2r6ypzRZ0UNfmYR3ekb3BpHUf\ns6k6eJFUCeeqbWXWIu67dL7hKEGoev7e5wQlNEQD9WG9pBYuo8/KzjBhdUTQ\nLWu6LwVtbQaPD6bWpig0DsgsKdMcghFFGZJXTiml3dhrNH1NiPHSe/VYRKa6\nuw9pntbC5/qw0PyjL92hmtTjnHiYZhmHMGVekQVGZAYbVIia5Ymk3LqN9Q0E\nHWKJt3G02yVtin9l4ZxOW4D4S8xSR68104pvT9O2RCltcyJSuo4C0Q5cEVR3\ntX9G+J7FPDEXv1MRaBQ1YgtcdsUOYwO9nxnhl4P2Pry5xJgH0DtzUWxu+gQB\n1K4/OCx6rw0UApU2MkYzfchlVhh1hPpvshzIvzKp9vjWXrjUnC3kfB6n0aCh\ns8m/dxmclavb7VJMK0q4qo4+7slk/FT4Bbf9nTW4uPdwC4eMnAt70opP01RR\n3KnrB29GdAl2i1aJ8kWMpf6YiM6pJxpSx1VQ7sP21A98fnQxav9FZkL7P91U\nxMMoarjRkP/h/Cjz23yvOLpkpRHPniuGcv+HXU9nzWdJ/w+Ov8+S/ZkQExBP\nUCEr\r\n=n0Hw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHR+mM7f/j6/qiMN9KfhR7iEjDdVs1wHROgsQrtACMXoAiEA/8y2uBa1WJPKDzU22rD8sXPPD1RZBVlQU01k1Js+Rf8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.e5efdcc0.0_1627492935997_0.14990086503633537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.ab310900.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-circular-progress":"0.23.0-canary.ab310900.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Z0v7sCeFzmTyQ4I0veEBcQ+2rpKYT5Ec+/nqJ6XLzDJvtIVviGnguZ4ewhrWTQghVYdG42pJb+SdmrnprPyMVQ==","shasum":"c700c4c52e9559e56dff226278d3ede07404fcd0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.ab310900.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbw9CRA9TVsSAnZWagAAwl4P/igdaxhypUQf1oz3zb12\n+fdpLw7KrK7EUeu5jRD1dYV1JIOVzC7qk6ykKQFR0KCEHr3UxWhLS2bRezEm\n+K9ikGXejcUMRNWeQ+He7cPf8Q4VwU0DcGFYwGElaqCE8GAWPbsT+JSNJIjh\n9aBRjjr1uY0Gm90qImo7Qk8ae78IggTVjC6UZVUTtmSygDbkRzEmXOAD03TF\nvZF6nN+hM6kJD3Gkp9RClc9FuqjVpEcZihHnqY018ofCAOczZVpGF7YPrtZZ\nso5Z95tWhF+w1PhdvRJ4aNGcGqpZDko/J+egsjhaTfIFkgF4UMqGXsRnOaS3\n2JclWd7Y6Jwq8MSI83WERlekBLjwkahDs/QutF6Zg+prsan2u382muX8xJUS\n3jxV83tBoNpU6hjdhVSizkSGieEjOo8NjMksiHxpQPZEuTyApH0IyLVG4XY2\nrSFZRuSueeVptaDnbQbbGE1OxYljyZ/Q+1mgf+Ux1nCGo2GmDRbOqL5VU226\nXnE3f1UY4ZKiwATbyqHWeQ7nmPDNNMi5XoAnJp4YtIAHL7LgrRM2m60ltjK4\nogHlyNPBK0nrYr2yzidsdO6GtmG4QfDK5PAFLVtRPv3AOKfcZU8VAaoLcYGX\nIvF8y8pkmLohgE9wUVDm3Y80yIzg8Kc+9KX47c3R+uTmm/a7LG0cSeECe3LY\nVWz/\r\n=iLrZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq4AX4OeL3W6sAqHKHqyBhF4A9dMxh98RkZYJVKU4yIwIhALtkr6hbOa7A0rFL9tlXObcM47TPacR4TSJ5GYgspfMF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.ab310900.0_1627503677652_0.3204019819694972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-circular-progress":"0.23.0-canary.21dc9bc5.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1RIvStAgGjgyldFlRxPOpuTvZHEOJcFhQ62DRpGldgPL7RZKmGEMzd/it4Pm4zYcdHibJBHDHOhYn9FUWpKePQ==","shasum":"8d86514363558032cb21326458b3b37c95289620","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.21dc9bc5.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1XCRA9TVsSAnZWagAAMYoQAJl6TjhXxt26c6F1newh\nqVQ3XWHmxvEz8x4D66ekDNXgPAXxQFNWRn4NmHPTJO+Vx7CF5W3JuNvIJNsg\nWpL/5Upflfh2UOG3zGoVsntuiebxTweeB2MUZG7lU5QXLLTq0uL5BlQNWnP8\nl7YLdAJGaNdJ3R3qV5k1/FW8Txapx5yKWU2BYlFm8EW9//OyCV8XX8fL4eFw\n43IZhB3o5/6kTO+06daMqpOa2Opw9+TsCJfcFJZFlpR/bqTncBBk3aRW+VWh\nDgaq4pmpUnmm4kHUrJLR7EpBCFfCL0Ho/cLsFjI5ppayJ0FL5FgXvUXT76h1\nfThb9fki/MMObXZh05EiFW60wDcld8vY1+MVA9t33A3c31BVzYrdjLLr8Pwk\neD4ML9QMS2j1Vr4HZQPSniqOIHLm9wikN6f7aBTzFORwVZ0XdCRSEMnc+no/\nzp2UJ/ot/pMkhPoDlWfLsD6vQXi/NK9ByQb5raYWguhCX8ADqxRLyXh2g+2m\nJbff5v6eRT2xjanRDwRVBTiN250EOVi2LAqU8zIjQhtYBNWs8S3eOKHjKVTH\nkxGqpagcUqWlH1Isw1DoITV5aDagmx2vIkJVfcg5+hx3YyNT32XAGfKITiEj\nRnwQzjK6WIsrXVRU+rUfIBb52XbPUAl1hrpgzCrnGYh9Qy2A55splizWEovd\n59wY\r\n=CQ68\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNcnoYf1aQDMUDvbwp6uaZKtBomcwtjG2UpYwJbeGZCgIgA54CMcrCwnjS9/jQAWbc7Vlr9T5TR2deYWjJPhditoI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.21dc9bc5.0_1627503959834_0.6685180872525833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-circular-progress":"0.23.0-canary.68c7fe5c.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lzRnIj4GoAUXHh7P9joyZp3s47KK47HfFVRdCCxuQsh0onP/1VusIgvdGSYZSFjWb3ZbGUS2NS9hbn8BhhGgIA==","shasum":"e37793985c3bb83ce5c0019e6fb300a33c99bcbc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.68c7fe5c.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQSCRA9TVsSAnZWagAAzw8P/3L8lEoHYxU28NKst26F\nGikbE1D0gnmQ+isHruxokkcyPkEsCGgKmXIn8IYnjZMHmY3sXZp7TkO1n7D8\nah20YM2IsXUo7xkB8C8jjS5rmWHIC4vLLRrupFZe/zNn7ndg+uOArwmGeysP\nr4rHlYplMSOecb1V1+jiHOEQdhcFUi+BSaRZTu/bKJ1DuaqZwR76gyTVEVXd\n1Vq4DcvU1qTU1Qh6scjnpKFNnkt+SWSn1rbFGjVZ6ztUdBXaLD7+Cwfzpdll\nGxpcbo7zWDH5fj12oPj2qV5pAji39r5diOHlnfkzOmH19QJBBGlYZkGqN8HO\nGXNSCI28U6MVPH8koWwMfHBrm9fLm/YTDhP2zFpWs4PgY3k/QHn2FNW/QcJe\nRLjR47BLAgKMDYLe+2wNfIfcSfJGlE0RnS9LLCu6NUI1uIhDUo9YtRllNAMe\ndpx7F+e82TZfnHdy40cVLbfOtaF4vhl/WgK4k/b/zhtP43JUO20OhbUY9Ode\n6XmIaQjpQrlQs+/hpof/5gBaVbqokNPHmK9+MrT+yHofjpoUp4VkaMl+isg1\nL04Aj0PQniGXA5pZOxCNIdBf5dCEFp0Vqyvml5Nzyqd55JXbiwCF+K6+aJZa\nlS/IEazJPyYQ2xk9NMswAwX87EwoCEmxKilAzfonGfrwG6LSf6JdXELgvI1C\nY9Ns\r\n=IyVi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZS27ikDvnUC/+NJ9sR4pcg/5zGV4o2FhEwEQL7ZL7yAIgXbps7XUABLcPM0Zv9MoyVbmDSM3LAXZ9wGBLG3gOuOk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.68c7fe5c.0_1627583506573_0.9794286249669335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.aebe39e8.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-circular-progress":"0.23.0-canary.aebe39e8.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Cbm5mBPszFK2ItTm52S9QyGCfgvbMe7yo3C6V8tlxHmxrNq4BZtqpOlp41j1J6TX+Mt6vVnxwZW5IeQv8j8Vaw==","shasum":"82a2b133bdde3d6cb9725aec15609cb2f76fc7a3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.aebe39e8.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9lCRA9TVsSAnZWagAARC4P/26AzgaonWgrV3AA/lyn\nBhYMq/kOczu+iSF20vOod1oR8qFWX2tpPr6qRzzR2D3guqBUHNQToUMGt0/I\nzglCVsg5SU1Ooxyni/Z7L98tj46WvjXryzTcUtu6mqzCQBweHLwFOnbsPhRE\nBwR60m8kBHdjG07z9gtO9pA743/VoYD89W1kN59XNqdCJ4zc85xncNtFsOX+\ncQrXkQDFK64rtoWEV51cW/q5mBDvzgBF6kQGjtfNsUasnHYf+8in4f+T+DQ5\nKgKAcWEWkfqgBOuvEh+6MRK1BOi0Uj0dYGaevLOa5Eka8+4IC0mMWiklK6Ky\nrf/8dQMQaMEC/UQzPxCWRR1xoz3W1+A7T9E1mu6KlQebe/X3AQY/A4Tw6Eh6\nxiKdgwRy8ePe5zdSDBBaCrJyQwQ+Djd6i9DHiDGYPhSdTnUTRNdG65pZOKwC\nTdPHrn//IgwtzXhNAzl0fGSxbepjDFKj3XNkKu2TtO4Tn1V1dGxOFR6S+N3s\nzaBo0A6QpfWYr7qdimI3fYoAEqTwuBVjAoNcmGfJZNQ5LPZIboo2YzrobjIs\nUB/IYpFd0swoL0egHW72iXUoWjA01UeaHNO/vE5bldMChBJQq8N/7TFi+euE\nQFyRlfZOGD9yNkrx4gEUloWq2Koh+lkUllqvEdwT1JDKmCvI5Jl2DR04vRy1\nBnJ6\r\n=tRiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkg6mKy+y7Opds0OfW8J4PpmKsrHJFTHI0OQF6pdh7LgIhANnwFLskUxXIv9uBKYQ/nKGK7suy4NaXS0bnjXNIUXjP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.aebe39e8.0_1627672421552_0.11986246539509926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.ea889c69.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-circular-progress":"0.23.0-canary.ea889c69.0","@material/theme":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j+uuafa4tbYQ7qtjzfHFNIMIZ9R94BSKNZ9Xk6xxMhLX7o3GSNa4CLZokk6Wgjo+dRDnam43YWIWGDUU59JUBQ==","shasum":"86e972a98ca215074aa2521005689478d81ce93c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.ea889c69.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9NCRA9TVsSAnZWagAACcAP/R94s5PFBm+plplKwtFv\nrIk62q3Y8hGcXNP22+B8jhfdZZXjG4hP1XyqIaJoajwIUTivNrNI/CWaSpGy\nYhbLX7WReC1WARlq3BkXY3adFcAKNZym40EPNZ0sJY+xMl9ex2AXg80qPr23\nyrDz3HPJZBop4zcX4YvC/gkHcIWSaH0p9igapDqxEKpuMua/xmxifMI62Ehu\nzWOMdbm5Z08hl+Lv27QAlXcXDc0k9sxNIsl5vWmTc04geGb4zLHYpcMOzHlI\nnacNH2rz1Mxl1Ogkzr+MEP5gok83Lgot5LcBNjVTqnF127yoyGvRlDR+AwvJ\nODhoyXYP0RWCeDxcRWfU72EsgCT1RkNtbO85lwIWiGcKG06pBjQ6EA1FQ38D\n2DzEkUD0VVXPD2S6bzx4L6hcJDPbO/KAdg9ekwwnv26G2GJb3TyTO8b0aTv2\nU12Pr0cnAB43n6BUrUJIFQenkP3n01F41EVmUAP4z4nfUbFie5vdyVH8x+zk\nzcv1lnVC4w6sjx2QAIaz5ISqMkVvamY2ZAZkTGoDWKu21tvjXMRExycxKhWs\n7oXAUhk99aEKsyRKQfg8cn4Ue6fzxDjSefXXDNlGSZlh3Pd0KE8CQEhAXqFx\n/YIoqajkgjzZhUlASTPX67/CcYKL3ahe3hAh/efUGQvphWpssbZPy+WtyKuk\nWzXr\r\n=PV+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcRX4sPIKIjWbN/QBN042Fm2Y+Bh3XD7CHryHXN5QiGAiAfNM0kTxUHwPc9PodpJf9bSp3cJrMjVk3TyYz6G3K0qw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.ea889c69.0_1628016461464_0.38093154397054696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.21918905.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-circular-progress":"0.23.0-canary.21918905.0","@material/theme":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G1FxNfnG45AsNYH+l/1UmixkjkYa8vX4rJf+b0u3O37GR8oQG3nAbt1phFMGeCEUpb3TgDkyi6G8DaIWnhuaFQ==","shasum":"a376a91b33907dfd7c06684c84d640471ede83ae","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.21918905.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGwCRA9TVsSAnZWagAA/RoQAJX9fUH2j2WIRzn9t07G\ntJtVMu7lHc9AsaaPWMQF3j/EGghB6Sd7eF45kztr96gLnherjrPvV9gCDjjt\nyIGKU4Ck5O8msmqKt/tVpmKfTjMG0DCsrG1DiuhnWLSDK2lOIaqtUrYJEABQ\n/wHcYSS9yxTfulmVp5uAN7lhxYgwBV6u75lCRlmJs/RIrRGx+irDZBir9U/s\nFQM8U496HJjWf/wx0CP1taaqNt+UpNda/FO7YtEdARqYCpMOGXWRNmC5uSR4\nQUa1KbDvU0fYvWFBY0vBOvINLeaK2SfvleKkorzSqeeRdf7BLIPxzatI1NcH\nQs+xjqQzuN+1pMi/kdPum3xEGwq/fU/GuaddmJLZw1wu9qk2qSU3LRv+Jx6q\nveyaXdUHuS3K/Xw2RYgB/Y+QgwFTbfyQq5ILHV9cJgn6FPyXHwFsvh0Uh2Z6\ns6tVHSx+rteiCJLKKwG73RtMLyHzp4UZcteCDh4jtHpgJk+TW5aun+R9z0PT\n7vd5GQ2nt78HChD+QNuorp/0Hwls1LNqQJ74wWjhFqr2J5nK9ZbRyf0zfkMf\nMywjJm2KGnKJ9z/0Tb2n3RJCqbohuGBwRzd97sXuen3u/qUyCZj2OXCYC3jV\nUbCLW9hIKeYn9M6tPfEh5MYpvrE9KkVJLbfCPvmm+/1MWx2O3WFRJ7H7ht3Q\nx6jl\r\n=jZUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALm2DfrxTPCwvo7646PM+Dz1mfMf7VtnnyLPO+e9DvGAiAg0HxVqLROYDScomoHOfLchSr+VQdvlA5PV9NjsRfpIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.21918905.0_1628025264340_0.18762328832416197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.193c87be.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-circular-progress":"0.23.0-canary.193c87be.0","@material/theme":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ImKLwZDPRVfa1Shq1gfAt2Kq+3gmYln8Rd7KxcdVj5kSF3DuF84ir1aHv1m5NH182i1u1cDQTvF8T1rxDzTN9g==","shasum":"660bfe5390b249d94ca50567405c6ca203ce85f8","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.193c87be.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdnCRA9TVsSAnZWagAATBYP/juIB9qNoDTS+ZdE8bsP\nU8/gsKiACxWEEPX+6WZFVxgAYNnKFJ8uPj37euLO2WAw8FkZfDjOWKykieuL\n7z6Tym+K4mIv4oo10IiI1zUDzuHJnQ/8Q6CseqdWDf9urChVa0+tLZBTl692\njJyBi4QJNxNyeIVRlQOMDM8xjnnQ1+bcVh5/7L3/BpA74MdTyrSzIZsj0rlG\nw9ZjtM8PsmdDHviA/aUsfBIysS8MijZAG6mhhNsbZ1fQx7VmcZgVZs4sUQ9p\nWeP1fjy1v9rFWoXDK4yTsZRrpW9eorw8IeBx6oRJiuxcokWqHmztmVoIA3N+\nmxfK7wGtXW1WQhBWHejU98/+S4zMBuKbd+UkdQJK6XqXIawTHI6pNCwesFlY\ntF3CtGUvxk0n5Z4gWoD/wbjBX0jC65D5t3WWSQwAnjydllYFenOI93RuaaTZ\n6EHYtX+pIP50pB7pobzc+VnqArybayPVNxMKkHcFRRyEXlMq1tZQSZumllB8\n272I8CIVZuGMGXJJUZWIw5VlKmcx/Y9s2qtWQREcJpzsAZzfNgba+55xA87j\nFdrrUkFH34mfTBT0as8UZ7pAiVT8E0aHwJgSt4N5pUPqJso8BN27WubjVogY\n85geidxqNRvlMtFF8aEdXBASJ2Y9IFO6TJ19UI3r9t/uaSuN4nAPYArSeip/\nfRVk\r\n=b/cS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDscByFr5Mcj2h2QFJqUX8jfBl4sgJ9Lk6/j3dP2KirGwIhAN+3H4LVplNI9bm9/JpdU/H8Y3BziYFMJLlMGLmCzjqU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.193c87be.0_1628100455762_0.5775101650430301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-circular-progress":"0.23.0-canary.6fc52d8b.0","@material/theme":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c5/POHl+uHJJcM6A6fGsmLP3WX6JF7RUS1Udrs9d/5RGbit4HuecJyqhUkgQ1oW9AMgGJteldQUfMnfhvkPDMg==","shasum":"4567424a1dc4f4a03e8ba7372ce1f15641315d64","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.6fc52d8b.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmpCRA9TVsSAnZWagAAXV0QAJtJ8Cf91c1MgDZT9t25\nejjF4A8trIInu3tBmlSRB/a4Zs9b+wiEybuTL2XbL+eU/61t1ajAEDxhjLN7\nr0RJcOd07vjW6zgoX6IfdVH+2vaMZYA4k4B3a7mEycmEXd6zprEvjjTb7t8m\n7U5rAgq4+fXF/QyCABuWWc8nmO6VZXU9eflTmCnvijaM5w8OX2rqPhMrJvUv\nf5Vi/sxmzU+wzOuIOSnPnXYlXDeUz/lt00wnOQ6QeBQEeojGE/FW3xOe6NPp\nod3qwX8TkmayAyUdSUm9z6NYo5OFRAqx1xPdSu10flTPlUpxmzYfhsqqXe27\nQG+gOhEPch8S7aFSqy/Ke0kG9Zyw6T9iZP0oAzzkI31eevQvwACVU7RF0IWm\nD54c93SkTOvU4XQVUq404UCLKY3nhUpBcdRY2rL0Xifhal/h+nY51Ez/vssi\nc8YGumtOzDDKgV30ctmj2YWnp3M+s5iVPdVnGIBzQmw2gpI++sNAqM+ugA0l\nxSx5i8UUiYgVwMeH6MiV4MWwFCuldupdbdRMkOmT+cU1XP3Eg3T7oyCC/Wox\nG6BXERNyEk52iFlw25zUCRp5bzJnHa12U9hnjO8b2APvlM+YH2Kg2n07VsFh\nhghaNqjevnPV1ofMqYGJqYzTuLp+wuU81Cggxui+66Ir+/GXowe7k7Wl0xGa\n70r+\r\n=TfIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYyiIkRmBlI8XUlice7MP/85gzGf4c52U2HOhptV3SIQIhANzdDvc6MyDSNIfqBnhC5GRQkT2X6JTQt2EC95vdXpYK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.6fc52d8b.0_1628187049491_0.4109732867251865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.e2e9777d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-circular-progress":"0.23.0-canary.e2e9777d.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5iPHESlERSCclUyDZvT3MlJ7IPDBbu4C7ZFR3D6S96ipPZgewjsTc11QAk4IAzAANPJU8eLNR1N18y+QRuvyBw==","shasum":"7eace5207a4a98ed1f2922a198e2cf7191b55831","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.e2e9777d.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGp6CRA9TVsSAnZWagAA7McP/i0xy3KN3qaOUyElK+8e\nGkxKO62ZWzRt/gOENjumI5aY6rvc008hJtEzyV6a/LfyaNxZaT+9EfG0YUrQ\nLADJyokZCC2+5EhxBsRSaJQCpamdsL9CyVVzsUFin/HALMiC3OdXCtgO/zPU\nLnJYR9E+SRVEg1vH4FpcO06S9CD+ikiMPZVs0Zpk5zeELvczx67xe81KDLpC\nHhW5E504+nW+K7kF9Snyjd7ONSB/BiQoTpROst4ID017t0JIa577FzgQfUIw\n4R/UJbrWfsZwpoXJ02lElaoOcT0vOtven4ygMw5qLs2lBJSJJ97+iYHVHr4K\nsWAb5hFaN4rgpFVvdpVKhb3kKV7974hkFFGH5/gz9XzzhWWz9uzldvfReVF9\nbZ4jii0ie1Ip/MPpWLUbnBaSXSxAs9YssXiUzHDFOVJs9mkp8JV8x1J1nx3j\ndJrQOweuPQ4MYo07bS8Ltm+WWHNBmRymIhJCQr260ZyPf1BY8LGPj9ULC6Ae\nvVQqR7OWn5cZfDTVTPKncbw+GsFXwqbmjt5opIWx5HBGLMttdiINGdlDHIlk\nX0edOaZQrhy46B+fiiXujZsBP4nHuDnSj0kWNncAfT+rOEDjHd1GqDwJrW63\n1tywtHQzscQKLEPAiwczf+jFH0S/NiBiZBbrhL05EOF9yO/QaEcXrfEVtJjG\nmV+9\r\n=pI0c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAguXlmpVl7dYYWDMF1ij69ePzxQReBPlzDtUB9hNTz8AiAOv/tP3UsBWyg6yH4ZRp09+1zjHf2EkrQZ73SfzIobuw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.e2e9777d.0_1628203642487_0.38112843055664736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.72ff1e68.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-circular-progress":"0.23.0-canary.72ff1e68.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9E1UwZj/ajA9Vn9zdO9ozsrewfYNIb9nnqX4KCat6TjdgQpxr0g+Pz5viLZ2i5rL2rYgVM90gUCszdXTnF6WDg==","shasum":"2544e6ff0002a5e3b4d794656dd7c30a9e335f6e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.72ff1e68.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAtCRA9TVsSAnZWagAAQl0P/iaOqYFLVsQoxuCJK5sJ\nguylQgflXkyUHndr1yQczpjoNMr5nbINfxZoRy074tPYIdDsFdv6Vn4npv7z\nk++HB9K9OdaZjJRqiAH2wmJFJLPaFreK/XMBA3SzA9AVPvbA7UhIvL228Kwq\nSumloRSr7lUAomYezBnBSIAM8u3jTj5ibj2LWP6NCwPyO/MxXpGBc5iwy1DN\ngnPfsK8d5WmBaSYPoU0lSMOZVLv0KCTtFESIE+gQMG+0rlBLfGBvmeZN66uR\nv/q0kMx6EgsrUs10kpMa/3fp+5rwmAUmBAtihPQkXhbRiSE3+QvWcUbyp6DR\n3n0YdX5RFUxXO4K/Oo2qyrG1PtsH4IRpRy+atDdPBgQxkndOsirr4c6D06++\nzxcPXwbduLyPCPG2p2gvjEMQtU2hPihLPX7h9ebI08N+KhdQiDscW0FDyyup\na+UX0sPLdYDohyea7L2+guxa2Y//EcHlGnOjISzZNrZt4WSSM2ru+7RSWepx\nj/PH/yPXy2z5aeOUrpuqh+f6ggevJE8Dazqx3vmCSmmfDCb7YGfuHT7vofiN\n3p7B9rIuohoC+W7fvr5R+FTNyBP3Juuq2Wqsk2GB3o91AjxYvDr6zY45DD72\n0KZfnbN8EyrvzBruFNcODZc+XTUeWgqiagYCf2uqiH7Lm9yo5tnVAtE2wj/9\nyv9d\r\n=QtV/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfw4uCwtTICH8Zb6CZfBLmrq7XT7DqyEjJaH4igT89SwIgXkMBdpi4IxJnE9WxpJAastWq1q6M91mSgOmq1Cxredo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.72ff1e68.0_1628282925350_0.03372378972636625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.c527e93b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-circular-progress":"0.23.0-canary.c527e93b.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8BNw8gLH2yrb7b3biseUbmLvzvIdX/l8aT2rl3gKcJKdNzsl2nR6OFYs9BSkt+0PUZkg6H+JWLu6JE4X5OkJ6g==","shasum":"f4b520b392fbd9b684c465367c4ea149579a62f7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.c527e93b.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVDCRA9TVsSAnZWagAA/ucP/1NyN7boVYDYrI1AORIT\njZV7kXMioQ5eAjCLWG7tie3zWSGFTGeWKzWxLQy5mM2lx5xWAMzR95/YuGBp\nuY3L/XBRyDGvcOkXuk0XzAsmuIm8KvDW8EwaPzkBWS4enBXc5qynJ0O55MDw\n7mdzmnLDkXYG+l4jrkr3BoDggRwlccZcrXuyO7PiXyP0AtQDFBoBCNfQc29H\nW6dYDeiQqSzp4waKzoyzHMDmctMZCv5/g9PNQxXzhvibeo1vRmBwtxlPnCvz\nin8gZt9jwV97kGwkkRJjl2r5cAszFQCoWBnMmpMXzMNe/d868KDc77Jq+/Nr\nsUhnW8Fb6kIrNobfTC75GHsTXeIsWMTpX/IzjKwfPiAGUpw5427GQ6Ymti/H\n7PXVdXOi/n0rjZmPVZOGFEVDztuOyNK9MWeHvVCPSKXG6+Uz49yMkKoSNX0/\nKbEW6TkE00OW/DUPNPSG0bNDlQ0Vy8LzAfS63BjXJfsGYeLr9C9JyQrAIAqc\nK/5dUkakj8XgtiaUGzHnC8bUAKl/hZsuWwjU2weprkQhSmOxXyDfJBxiR+Gu\nj+9TJnMZdpSGTsDW5QwBc2bdOk7F1Mb29Yfy5tRkhkJ/VMagjBnom9AE8nhN\nEpMweHNXFm3BPVba4Dkl/POas/2dNLihodUCaijSW+30PvDRvWo/DEdAfu7a\nU49b\r\n=Ny/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5420ztsFdxnBe+yR7Bd1GWjazMUrSmAk9ti/JxfD7JAiAQSwEqOSSUfGW8Pza32yzmWQC5cwc7rjMGYrLnBhC+gA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.c527e93b.0_1628284227785_0.5735906981406143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.78b1eaac.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-circular-progress":"0.23.0-canary.78b1eaac.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uSJJBj5O/UWGFjGVTOqWgece1G6wHOQhELBQ8q9sVDxRF1gt8t9MM/QOgb5on41NnKHhx5BLYMLDU2Oy7IZvrA==","shasum":"730f72853a265fb8cea37d04c40b40a5cedb428c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.78b1eaac.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4FCRA9TVsSAnZWagAA6QwQAJrYsSAxGEZQ9r+9qVK7\nwUcCo+5sXcOjJFDzhPy96EgUR4Oxda5vAp3QlteE5ioQq9tPwLz6eZN3sZrK\nfej7MBJebZWMkHQjFfu/qgp8S3Kt9ieszrHQIMuRYfX2MqyxiCs9+8+8Iq4x\nK+MV1ygAPyOVHp/E9HXFzjZZO9zaFzTpqdZIIfJv0nY+zT0uM3HGeqVHPgRD\nr5wRzbkrRNn5isoV3LD3pEh7vZvf/iL8Ma2Cgfvdvcs+pT0EoYaMxETa5shy\nUGf0sSLTIqUeL3bP+gFw071Q3eCADz+uAviMQ3RZpD2WxzzDA/RFwXyZKFzZ\nU9Zv9QodikbDTFouCGelPeUNeoityLcIg2frWoRffY88ApVOFHl1ZkgK6VTE\nFXlJCqssxbCeRBldyfUBcWZHPqdPiTt8j17y+rohlV87y1L1vj8quoMaKe6U\n4otG64QXFNPipUszrcX5HAHlBGb8lEwU4oIncifDtGKkEoGDiJhweu+phQZY\nsJYd5RJB+rOnnMVPDevwsL6z3zYn4MYc+Mpm3GwJ4IclKUFbFksxzzgRBzPl\nF2qM8ricLB6dvYg/nUt35mxUqL2wgHDLi73KrG7ljRTgy0DwCTFWWhtzUTVv\ng/DI1/XWQye5F27UXxrPg4bYBRA+Rtv1RXl79HScSLJqa+ELDrdKV0j72p83\nYKxu\r\n=sSpU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIG487x9BlTCqHuyoKei3lV70SRSvMII/qyBsZRYoKdwIgRJbrV/LslIqGJ09+7FWMwLFxCgfby9KOcw/0t0XAgsg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.78b1eaac.0_1628532229051_0.21811393979234195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-circular-progress":"0.23.0-canary.a8a4ddc9.0","@material/theme":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hGBNoIUTu5h3Sfi8Lf0b7sCMEvfy1zY8KG4+RIfdwYJ2Fgq9Lo/thp7g/cEZjD68KkLYlsCBEPp4REa4c/tidQ==","shasum":"203aae4aa3e827eeca06f84fba8f39efd9797c07","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmeCRA9TVsSAnZWagAAcw8P/Rm4eBqVBbvQNxvUNd+Q\nYUnkMcMcRzF0VmkUg/daqal1dweCzbLKjR9/mlF0mF9kM4g1fAUTyxpXfWUG\nLRBswCHW5u7lwcuE+U6X2dkrcYxLdCntC7Tm04T0XZ5VfYzb6LxxDItK2Cln\nq9mZdqH2GFftQxhx+wM1MFxmiJ1QuiY/UvQzrm0oh5Bj/UO53YgbXF0s0Znx\ngo0zirnYOesyXpMZsJgpHTSWyxO5bSz5Fc1CWhtCrQk8Q7RlflspcBXkmCG+\nZ0cs7Mvxv6cQL+0JqDDTZhcUUtxuhLx7xdMM6cfRCY9xXHjRmD9e+rFpa6pk\naVUMoyGs4D2fgEX3EepKM9RbQzsupGQrT4beDjf1nuKtCXbxMLClJnTjYhVx\n0KoduW22p56Ahcfkhz3Zbqfw2CwNz1EGVBC1Ux+GdnOrh0MUOQ21ilmz9d1G\nRK0TvJr7FaJum24YMeDKog2lQN3bNVV+KCIhvzSuC8c+aX5h2LEP90xUVQ8P\nDJLLxjLvtE7GTkI2fNNVA4X31sh99wgS9uWWgTRM253ap3s+bPKDR+XH+T//\n63OkOgiH/iYa0zlm0X5BbcOrm5IYq6kKEyQOt0c8E4FbiOL5HUBypRYToZtS\n0+vvAP5Ns/qoZdRsoy7egIJ7JCsYqZ9um1GInHhTS6rMyOsQmbn+U0gEWSFa\namAT\r\n=T61A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDveFEJpeprAQ1S/I3VuaalkRaUOALoF8+VwVK1Xlgk7AiAMLGJiFkZjm56UGM2pUfwVFZmk7BeuIaboTlf6CcL/ew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.a8a4ddc9.0_1628621214598_0.7200783936369499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.99fc0632.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-circular-progress":"0.23.0-canary.99fc0632.0","@material/theme":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-peQFfOnMXi/EdZpeSGmqTuMFMcg9PfuwkcafPD0I6NrmhHvZz1pxDlQM545+fR2WwCzsD/tLhFeb6rs9o/YhBg==","shasum":"45a53eafe8c3707386682c50159e9891d6f10037","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.99fc0632.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1vCRA9TVsSAnZWagAAFo0P/18unas+b7mXdDodoMrW\nDA/NAJj65ma5urVsOGInoKB+r5UFkg/Uz380ZWOuAm78sklU6oW052wyN8L4\nO/yE6OnxDqgPYW94LJAApvdc7LefOs9ZfeB0d9WbN1w6w1m0ZHLPv81gtlkq\nBvgPx7oyHIV97YlZezUIpzYE7GNr53jnl9yhNjgW6OAYRmB1hrfRUjbtsxy/\ndyy5VPpgIiXO0nMt3wUd2Z1o4r+SITGf3PtLRY+vWOFAyU9FAd1WNw9SXxKA\n4Rd9EoOgrto0TBJ+wxoBUL06aDgp5kQBLgiU69ugozyNPCqgnfJktYyz9H0g\nsdjX8iaRoKl6D3iumPCRy1skQmTq7Q4d6yavwUDGabTmgLQJxE4X6+pvPsbF\nSUFisMoXB5xy57PfWBSrXdIEWmxCUf0B1psl8CSL/8kRPEp/sWh6ZkL07eyQ\nsz90Wvg0IPn0/sMysWQIlMbO8z4jQbVq6CTRR0c2SqYGVtpStmqyOhJxCMmm\nEWcjSn7nbpwrEhOCr8MBVaoq2sm9UH0gttv5ITCP2AMdEI1fZ59WzxvXWES9\nQsYG/gV8tz1aPAlmV9e/w8voK+tEgPvEqxk6x91H+q1tpdJcMBO+3xqEYShR\nwb6bp2+UWyx90gEAEBFSq+lD9Y+ZrlX4OX0PCSWgBUDB8OMJI3IalNwACqCa\ns8oc\r\n=A2mP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL7HqYHrCfouM7Rw2lU94bsbl7yH9xGYSKSQRd+KwMUQIhAJ9fpCQzd4lMFkx8NB7kzw30yVjM35iTpiBuytA+bCoX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.99fc0632.0_1628720495354_0.6070250506002464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.3f47ae57.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-circular-progress":"0.23.0-canary.3f47ae57.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0UvTzs/pN8iJW+qTtckAznDA1nMT3R4sjWx9VFBhhcUv60LtmRDtyqtmxq8BtWr6fyV1wyngQX6jTGhf/EnJ3Q==","shasum":"224cdb2cd4cf82ec72d2dc23853fc22099c2584b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.3f47ae57.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGfCRA9TVsSAnZWagAAS1gP/0ZzTXjiwqm6aIchPAtq\nNjTVhLAklS/7bDGB+ViOnaq3nWGIWdo0zXe9ETdYPWhmduuAUILaWcuOP7SE\nuJhFSIjyw8uE0WuG9m9cny6mgs/iVQ27+Rw69mhzMzUKvbPJ2dwca0MA6/31\n3YPiuNwwTb7cRI8gg9ya9qjv0cT11eiqXGtT6GuKs88Lvvprvy9DQHpt5Bb1\ni0KRcQGmmcP8quqzeBwI0Py1Vy9HTx6zPQ/uyjcN+enq5zKAHeO3YPID7Lhd\nUDq0S5RjywCa7f1YiMwvu00FXkapzVVYZ4CVngI5iz4xPvAeScJr8qVq+yY+\nWvxtCCWEncDP1ar5mYR8MHrWCd5VvBamz/s5a/2aCSxL02pWCauENFG2P35p\nM7hHL2fgW0DR1hgJ0hJfOZ7poTqjC27dVjADJXG26MiYdlKm9yA48kkTlXIb\neb1QSSlKW9MDqO1zZ/06euOIJI6HLA/cvA5CFZny1A7QE/dCkKfMiLGVc6V9\n93WPRVFDxEADdOpNdEHUJaXxJKbfwvdyHng193+NrwqgCn2mYAb3nuORb52A\nTuYyL9fB6Zcccu7crgAWvvzpcqe9te1kfve7JPs5WCWTd+rPe2GK8cnxccHu\n4V0MQH3R/uBeY7mS5UM41Qm1Sz5TfYeKIy20rKOhm+pbsJgEi4XZkY6VeDOK\nUPdV\r\n=6t/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQLRXzmM7Nft6c7nt34d2/lDWJP7VBY0vhN4oK73YutgIhAO2SeW3TZKhdpfvU1QHy+Vd69PHUmXOVr8taUKKsgtsU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.3f47ae57.0_1628791199209_0.33053203620886173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-circular-progress":"0.23.0-canary.6b9bfc32.0","@material/theme":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vH17Bw4ILS/nuexyHkI/IrODhYwj2b+iDPp07g/yEG3SN61und54kLSrcD6no32DzY/9KfiQUgOaFUVYrba76Q==","shasum":"6be5bcccb260ba85d6de3dca0a13a7ffb904cc48","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.6b9bfc32.0.tgz","fileCount":16,"unpackedSize":38150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdICRA9TVsSAnZWagAAjrsP/inU3+6WRJJBvgOVLlbv\nxI8lcP/PBgDagbQcxP3I+nL5joSPk8fOCiRQZt8vTiwzoPXv/LQqO5L14xQr\nts802AnXZUTJ28Dr64PN/e4xoJgyeMRp8MMRmqJ5tpprpzoHe9316ddi49Cn\nS69A4nSSlSnfjjYxRuknQM0MZKzm1H+QUZmrQP6m5oL3NyUVpKwgTU+f+znt\n61jqEXeBDEvibx97kIwy0fYQMT8B/uU2ar/rHofHteuqGGuc6mXA848KSXyZ\n1kf75gwUCwF8Ko5lQONVl9f3Hp3Z2GRb15ERQNL2JGRVk0nZrS9u8DBzNE9+\n6qKKkbIU/1u6LW3ToR8hX6ENO0v8jUTWLpvUoVgvL9jYKhQEW1t/UBNGHHXV\nana1NN+IWnD9fbl/RFEN+78Y4Dj8pfs5+8+dcQA7CgdpJLd5Qjkt2O76sKkV\n9ZIZl0RSlgSL1qawqAlsJo1W7nhT+GWt7IhXldTKJpldc8c+qhNQbyBkFgV1\n0SbSWhgdhVjtIrXbhx2sRLx4Wz1wQThQOFourQaebQP89qM9HsqcXEYNAz1b\nQ660z6z+3rZxY1B9bP+Metl+Zzpm3Kv3xSC/f6+ZGs8l1FW+DFTGi/7lbQmc\nP3n8jAtj1PczC5ZWz2bT8YtmR06LRzDOc1fKvdxr4ARot7Vh6ZNbWLuHelQ7\nMN0y\r\n=Mp63\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+H/UfkFI6FM7SurRCNyXN+4zzeLSW3Mg6nUjrRrOWMAIgd+z0VdeI5hNS+nTSLyL9rUA52ikQEhQVm5BcLHhYzmo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.6b9bfc32.0_1628792648569_0.17993961293158334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.c89ecc63.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-circular-progress":"0.23.0-canary.c89ecc63.0","@material/theme":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OrANazT3VCzH/LrqaYFV9PRc+fUfUGjfZ0AA6fZDOAXuFzu+RE2u24HJ7nkJHVf/gDQ6wJ6SRwNPxMA/L+Phhw==","shasum":"7f6ef4eeabc51011505da1e87cccbc9c2ade8c1d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.c89ecc63.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2HCRA9TVsSAnZWagAAQH8P/RcmqGqz1wj094XeO+g8\nZOq8Xs9mFRhai4MR2bpudw5VpmeLJwJcvWVIkkEfjS1kwlapeVVI0FzigWpw\nAA4XrC+B5b6X1a4FaUQCgnVZhklAbppS15U1Xap1ETMvTJAczNqsl2rD7Nza\n0eDWTsloQNZ4iE8Wy0W5xlqdwHSpx4LdZF6BCpxfvSxiPDYJ4pylLN+lJj5o\nqHNqEoHSyXtpzEJTNlqE8h8HpU7aukRMKoJ15jV8v7fUe7Zw8v2GlN4RXGU1\nPjJR9LgC1XhONfAw1ptd8g0Ad5G2oczYTdfAQNF6n2vND4hAL1PyL5VajGZf\n6XCk2bRvJFajQZ2gccu4xjHizeh/ekfJvDO1f3vEBb/rQBWrC4I7Q5Zi494E\n+0H8la4hf0DCF2xeUT+LlXH4XZ5TrjXbqCv+TAdadgNwhs8BR4skPcSUYgt2\nyLzv4piGhDG3aMgYSx4LSnoTSHw43gB0C89neMaxDiNxHOdfILgun2glHE7I\npx+3LgZZMKIeARqXNkVMf6jn4GuK5/3KxnKS24F21G6NBUQAhwl16gPFZhT+\nHyBOgnOF1fPMVyDRjDvnMm6W+nFFTW4kY+l87EvwWIoKziTUFgA9av5wzycL\n6ZWhrP1A4tQlwO3J/5WM2VeIV9d6RWkK3Byxp8bEOftG13geaupSAFB+lGJS\nROc1\r\n=RHAe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwdEMsaV0mj9HAysuP+HfIDvUv2jEk8IOFGstNeOmn/QIgTsJgwoX2oV4ok5I2cjZO4adfBUtv5H9n3CH84H/wndc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.c89ecc63.0_1629134214945_0.13465713563216686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.59de86bd.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-circular-progress":"0.23.0-canary.59de86bd.0","@material/theme":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6dBzj/fSKcg9pA2v9Z7JrlwVcYx3H8XTdtbY5b015Fn9eLuWQjv5jxdio6MRhtK1nHP99bNOwh4OTPRFIWBtVw==","shasum":"704846937380417497992ecd1050ffef2a8eb61b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.59de86bd.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSMCRA9TVsSAnZWagAAnBEQAIVspFKFIiyNv5pCr4en\nP6O89bjDtMTnLqzA/qaP8RW77HU8KRCN7zvfQw1uo2QKP9jzEi1CM0PY0pB4\nbFFKMVsh7Ljl7Cab590q49OezdW3RLmRwIYZIlBPPWGJIdnReRjo43qJbpny\n1btbRT4F10LPIuPchA1npIqNw7E7zG5DegeZ9jA8xi5Kg7xM1q687aSUq4T+\nX73ev77V3Q1UeyXzBTg8ozbz2h0OiWsMxHmsR8ptRnKD97eCv8Eo1dNUih8x\nUFZIwK2iDHoAKt1Qr6ob27L9b8luj7aIA8iMY0ev0SUf9Ohut3UdCvvJgefx\nuAufJ+yT+5BwMz5BBs6+ImetD1JVz0AbJYkyrQ1Tfas/tKCp+jM5yL1CFMcM\nrw1+kYALqML9qWEw048pSmOF7S8kGC6MgXlImLQkuKuTWmEV80KkqBQ6PQX7\nwo1H45ZrI7EbYFw+InLdGTdXRA0d6AxJdTdTaiLtfpjbzqqAB3z82HpW5Vna\nLDzN/3bFCvAmUV3cNMApvAIuqNwN1rp7sJp2T/GDqpbt52bazHgmVXa0uKUZ\nUGozgRRlLYqELWSi3+wa0kS2JIKcT75zDts2iQXiIKv2U1MAGMXF6fS7m7j4\nzEgWXG3Hv4f8ZJlYgQXYX4Uq9K9KmNKoXMqu+cVRwJsiakLLAxhkYrQymaGr\n61V/\r\n=QWmC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1nzJI3uRoi+wBXWI3GBydvdpk6ZN8iqA2nXppM3JYvAiEA/3bZYu1wGQdf8ncNEuj9bC0Xf2PTqZjSzgZD5VqpcPo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.59de86bd.0_1629250700595_0.10612586284960179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.dcda879b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-circular-progress":"0.23.0-canary.dcda879b.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g/ri8dOSEWElijchx6xyFcJxEk1yCMxA12cx+xnqB4Z8O6iptc6Mz7X8dy5qutEdVpa21Fi0kNSQA5cYATUOcQ==","shasum":"f3285f93fcf706d1eccf8752ff12911a3a2f53f0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.dcda879b.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhSCRA9TVsSAnZWagAA2MgP/2lLA5PJnNUL0TH5FLIb\nPZBVroAY7NjNNGsTdtVg2Iy9g9KjUQurmTxKOrUAwhH1Gs20X5dpunDnlIia\n7KmJHquHr6YrEDy9xOyn5w2690X8Mte/dIayoDLVirmDBWz9WbdnWAi8by4W\nAbpQLNQ8rLMrWR/ro3tWdqMeUELAlok20QB3DyiBk+fladxmFCysOGfFpbvl\npGTSEVV1E+4ZyLFDs0Pi49BiGb5o1oE1oDQ53lUQc1B8a5FAj2Erlsjz7AvR\nzN4uUKP2qajxgqHIE2s6VNOa3qGeAIAKQebRmUgXtKP2c+LwdC1i6ePu9zgC\nNuuRgdFtgtcrRxwIZOId1kZusdBKp6XxhkF/KwjkrokEnYYGPswYidehyKFY\nDOcXO5Awd/UbGCs7metZbzAzOFgvkAGuRexotiGglwwDTgq0GhpyjGllsv2i\nVrJdpA6o4nEroYdtM7TjWbmVYuoBXVqZ/yXEzLGs6B6NhTNbJd219d8Wzp3h\n1dYfcvC3gumsWCd1++iCnSOAwIhhtTi7dwIbIzyTLTlFDDDzvg9+UumwQXwt\n00VckA8Hb+x9BVID5lKJRB1vITrwt1gTBJ8JIsjRPIIRJL2CBybmZ6gK/R5m\nu3sFgpidowLu/3Sz6/IF0QYGKP6JDFxe1i4aPoa4K1nSiMAdK1ZmXL3fIELD\nnPqH\r\n=AXLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDECWdDHPI2+1m8/WWCjiVKR7akpNNZCEcYYXJHG3NLIQIgLP0vh0HDa0E8OdONaTZ67JuKearx63vecjjnFSo61uU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.dcda879b.0_1629325394317_0.6835630582547534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.dbb8b366.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-circular-progress":"0.23.0-canary.dbb8b366.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bdppT13fZtX5PCdbr153877lCo22S31R5QJXauYaLZ0P32M0uRYoI6ltZC5Ku+0nzj3gU15sIPvEaUhP+q8c5Q==","shasum":"e198c8752ade2578252e9800ea6d2470b6967284","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.dbb8b366.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKCCRA9TVsSAnZWagAAIC0P/AuRfpjtNf090+X7aHTw\nSO90ftG6dPyy5YNewLmVVUC0dAO12HjYSSPfwvgB/iO40W+WUvM6ldlKi6bn\nklY8W0L6kn1eIw6qYYGlnA0bjStl3P13QzaXI2UrHxXhqvJ/44GNMNvSaSwb\nIYVTU/YW5RgKGERn8TFHHz4wpTWqG99xThvyUZmobu/NDGsArBIv+r6xBgIv\nAHEKmfUpn7nu6BAeHI4h5KVoivAxTqcWx6CSeHInVgYm487FGKuOJLPCfsYw\nRvqrqYQ8cQGlC+TSCVfRoHETZpH9vejLc3X72zTwj3dPvroCpdmeLX7Jjpi6\nJb5Y92rE32u789QkInI9oCzBYCV+cu7wGfjQLQubqdWUzt7XJlW7Oj1Lqlk9\naq/qKYGXcylkYQQSw9909aeI/kwJVGQvyunJ6DP4kQyc/aRWq1CHi6RTYlqg\nOk7FDw/QAShXpA9aDyxyc0lN0CzQX3w+ueSf/606a7l+SY6N18/Q+FUYzFX8\nRWMESGwFgifQWHAX+mAst7lfUW99IdZMrirgNyY9T8n5GWX535yhsUCgWw58\nQazYRozMD0Nn9td1HtWVfqGp3yGp0z1iiXTh0TR4oHtuxQDTREyuyw64Rubl\nfYg4k2KVRfFQSLnrEoA3vyfToKACk3xE5BxS7qcd5hLUVAdTeo7Au6yI5SPT\nIGKm\r\n=aJpa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3Dczetb8gqHpf9C8EH0rIrqC836VNvw6Ljmqk9NVeLAiBYwN2RCJlJ8k6Cm4R4AT8YA+tYnEc+46oJM2HDxzFOYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.dbb8b366.0_1629414018547_0.6332894482480012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.c6e3060c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-circular-progress":"0.23.0-canary.c6e3060c.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7X8QwcXlA9HuoJ3koZt6z2q+owugsj4LxNpuyj6+5Xzc0+iKBYTLyia2H+084Ugo5c4plF5t179D2+5L/skf/A==","shasum":"2b85a1d1aeecbb7369b8ae4272d10c0eeb17ae4e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.c6e3060c.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLyCRA9TVsSAnZWagAAj4MP/2MBernyYwI29sTqgdvV\nN5CocXFu/tbUBkTKqy86L9iQt+srnKE8P7o5kkCFrbsRTsWNVwM6Buxwtiy0\n1ZuV7vQqy44Os1qvhy7QzgNewMKSAi9YgTedzIN8FbnJi8LIjCCAD20zBEte\ndMUXQROUpZHByBwGt1z3D6t7Z0Ut55pd47UHX1m8G6JHecrg6ncUJj1Oflau\npDsH17pFL6amtONGZbg0K3KUpYe7s7AowfWfdQoXLjomejeMDdLk70/C0f/5\nH5SaXhovT/gpaHohglZhdcxGVOwHQGDAeylug0cVY69jBOGxFoa/OgTeiHbE\nhJ2hAkFuT7NeziF4FuQqEqw7NY5f1v+kywqlbKqrV/infVNS5kOA/vGT3iYg\n2PZuNqm9SBspBAwd/xP/qRjx5e6zEPqUsmeYTZZBmntJjm+aevRA+kvJgL12\ntaTsLoR9hSpCI6DK74YV+DpUY7+HeuoG2VLNvXMh7P4kXx6nmJpDA1SfFm4t\nM2zCsQVgq+3DeaBGGK5bVK4Ld+whc6lQ+JVPi/UltzcExJiVAjFMjIYMC2VH\nuIX4qIk02gaUyUYufmsc/Ph6sLh5m8FVflZwT7SMfWfyDPNLfFegDXF7zTyn\nJfTgx8h2VohjkkQwk1JA4bI+MPuFlPmnOAGRVJkTJTwCJYJGtKgRD+xKa/9I\n9F/8\r\n=RAx7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOb5rgchwor/ctfCuqNEn92YoWNW2UG7OrzFBp7fHc8AIhALn1RV8rL13Cfo4f3aa2LRgkPLMIWDdcy+fW7ARNZ06L"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.c6e3060c.0_1629414129997_0.6567459747410647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.03120b7d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-circular-progress":"0.23.0-canary.03120b7d.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-slP0/MVV630Y+Kc6MleH3n8g77bvDtc6s/NJlJZnuTwrRqS5ftGGbGoc3emIPMOjZxQEatc1zbKNjO/xwrmjPQ==","shasum":"ca5ec89ebd24a5a6faccafb4cc9568d0ce52c40d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.03120b7d.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbkCRA9TVsSAnZWagAAtQoQAI6fbIajjF9U4g+lW43+\nYWcHquw//i0fJ4QfKTslk2+OwVhkk3AyhWJvIvoEuZTsBndCmACoXYQuO8xE\n97xakCdeAXhy3jV4ajhsJg18GQBMuYkb8DjH9mxgVwDu/2ZOHP7xjdohGNJR\nUXTaNcybB3zvS8IP4D68G1bRwZAhEXU9upTpUc0OKP4N4rwYgtBQDTvIq4xO\nXCxgjkwpHLz8w00pp+6ODkP/OnWDOyiueul6i3/JIEusWyZzdil7NBFBa/MM\nxVUYuX1OdK5IXbVCs3SfjkkhhSqXo0cNRnB7IOx28BzIyXI6V0LnAhKdbivY\n6y1ijJa9LxacL6Li+PRiArjnMK2PvE0Nuhfrj0EKdojTSVX2Xk7jzQY3+IH5\ncAS/CU/I0/U21/vosAGY+IMaoohr5rDrvnSdVbh4gKqmFVM2sHMH596RViQD\nTgoAM5bOGR/Dy69yzvX4h7oKs1Jij42+VMQrrkHYH+Bpu6ekYcLqOHsanxjX\nFm0H3kEsrt4uYrxwf+DAtKN/+zDL2duzR1DfNFQPSR+18EsbUhTZUStM8FR5\nAjh4npabIjZeiwaqnrAzez64JelDuWPXKVH/48egfXTTsJzVIVPu/7FoePSh\nvcTCU9Q290g/GGcHb1Rr777iRk/cflgDTmaGS6VbtzkaErR+ZuqvQ8sL8Rdw\nypw+\r\n=kdDh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDsJEiB0NxsQOBEtVWsWmy27u+SIe2Xjd9+94lXNCOwAiBORUFyKG6yeS+uqKugu6qViAof0lE2l2jXytyq07bYxw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.03120b7d.0_1629419236244_0.09353835225660001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.d75a5f74.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-circular-progress":"0.23.0-canary.d75a5f74.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vbfe/0p5yZcTJp5+Y7pA1HnOIuDtQ6pTHfSKI4jldN1r/6Ca+UYvB2E1PA21czbBiLGriBHwpLrZVUliwcy2Xw==","shasum":"db0d4f3d3a82c90f2540e97925e98d4895dada12","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.d75a5f74.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AgCRA9TVsSAnZWagAAUqQP/RN6yuJmUgtWRYYYPxmT\n+jintnT32VXhVaMl0vG8nqmnoC7rzFU4XcH8cDLjMnNSueN3PfBRAnQRiPis\nu4j7Ki3RrQAZrmie6BhtCnqZeuyM9C6GrjsVthZ1QwYxBnLnH0KecD0CDht5\nowqVKMwzcr3ENgPODqDzc7ZJ4qyVSzG49pr52zKs2Qpurxls1LL63vztbycG\n5o344nixhKCdcYr1A9ALWqAQGCUr9rYfkSQC0N1btXlqUoLm89dnyeNo8atf\n9D1u2ZMCV5eP8mjT9SMLXryHd6XfKSy2rD36fWIXZiRAP9Mv9aK0hRWLlT8+\nDSNoOOatspgkZNZArExUavi5SHIHftLSbreKNkNWv4kNVNOOKkt/panp2PsJ\nc1SimOraxn+zCB1T9iiNYrfjVMMlrJX1OomzGasBVX66nqEi4WkLYTI89G9c\nwaLI4D7dRAonfKePoF8qoLGvVJj5EF7zSgGHoHfiYHFhIGGKtGalPdIry02n\nMMFczEXRivt4C9tzSzwfpFJcWWzqAXnB8WgCDdsSZD0FO886fCu6NLz7K8J9\nsAPWPoEBwGsHeU+Lwf/JjncIxKG12xd0zRtYWXEiPzM3tIpSvjkocfrjLD49\nNVkO2RYRPbPyTv9RXkbhhWaA5J6rwTIQtu4hbCpz2lqHLiz9xJ/hE2Jh7Uur\ny6s0\r\n=/Xpq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfvOWXjpqsOYcOC/r4uWyryVf6aP44rWr8tWYBqJUpnAiAjF7w2Lh0w/yquAsxY4G+W7FRnmVtEEV/u2B0r3PusXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.d75a5f74.0_1629446176154_0.39618761274935843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-circular-progress":"0.23.0-canary.3d79ffe7.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uWYYqk17XN4v5VEa9HGubHDc17n/fzhIHZj8D5j8yC2+fpUHPZMaGj+Yk0skUd4CFndaeLFS52mDpAiVIrLvbQ==","shasum":"cf59aac53f3e9b09a5546f3a9eb081e5e34d042b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.3d79ffe7.0.tgz","fileCount":16,"unpackedSize":38128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SXCRA9TVsSAnZWagAALIUP/3xkaxFevz2G4pkx5prk\no6iHbwIEoMpoj+h4gLkRKg7Vnw15XkICZ0cfa3uz4PtXZaIrMedNHXM5NI+g\n1SNkTxzqGQU7BES9pzcTOSVAEdIt1dWRhI7lxWX/dSlRfBGCuRD3AKxVB112\n5vMO1C7SSAqc7ZYLUO4eXRuVDwS7gc+pG/pFP8ajfVd2Nj+bT/snYoYjuk6U\ns/QcBPWzAfs993u/LTmgLCqAmO1d1l6tRSSbEswYxGhMQW0+6B+1CFCw7pbr\nsLQRI2czZlEGHUOnrQa44pfve1DL1CNF/gsTowz48AE8qj2iLtLbvKFIe8jP\nqZy3WFnHgYQn51Jl5/HGUrzCR1NDxkHQrGuHK9lYU7c4weSWJtBXMmJqclMF\njWUWRl0J8KYH9r/+97n/c3nMAn46yUR9eqiLIKT9D8ijDjrXOC/N/ZyIM4IZ\nSp8+Ok9qNt2RyISOd/BHybyp3JsTtQpJRqWyXESUC1IrUt3osP+dH1uM7LYE\n9aJosj9vDd8gjzHxFLkdz0i5g3HK7U12eQEcwPT+cWUeN1bhuPjQ/6DarYEJ\nT5kHXLg2MvWmmIdmpTKejDslDcv2aTD9AXRJnqougCO3T0dm1MpnryXFHOv3\nwvUqm6M1/QtT7W5vUOG+AlhrlC/u9dJLKW7CghsiIx+k/tGWdrokaTT0bLOw\nbNpw\r\n=FlWk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC76mqEIui575i3FdnX/7IC+dEuyoExbU0Tp1zNtN/F5AiB7n1WMSOXVAU0rW3HItJ3sUFSK73/a8sHMkRdFrtsTwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.3d79ffe7.0_1629480087138_0.6735607080113226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.02213ebe.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-circular-progress":"0.23.0-canary.02213ebe.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B4S/sOyf/WF4mM6I5NxrBhuSqFH8W1YXWiJ2Z2R4nckXwWOw5WAqJosnxPWeEiwixRx5TNXKmYUE8muoGeeUQQ==","shasum":"73832030890a087bade9fdd7fbc75c2c9897db34","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.02213ebe.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WwCRA9TVsSAnZWagAAg2cP/0n+ykZy/4EPaIxxdsPE\nNdXdHB+pJwtj20zVcmkcMq28tzxDCiwOxaGtC704vQgbW4/6BRArLEQqqo86\nCs1/7qu07D4ZVTq9wLmyqy5tAdCmIHSdmm80lKl0t6jUcVSJn4P+UXUdbQG8\nyAz8fmc40GBOtPa4zxiVrFqB+TlykFE+T3RQJD6BpFCPJ0zjaLySD0yTXSTZ\naczAmakZzUvBRE+QAodlg+fNmf6/G25csEXP5JdorjYdR3jNOeNpy+y/ZDOe\npgngbP8boOfKVYf2QpkDEHyQRteRRj46n4ALlJb0a/bcPKFNZsRMCMjgGqyN\nvAvJn4IBEfe7nl5x7oDNp0cnsELxODKShQxlDX6+v+Gmw/Do4wzd+PGegz3+\nBUl5BK3TKRdJgsrxJzKuPXCrCkZhDKbBVuaTxbR85uQVV8sQE+uQa4m22lcS\no5HPF45txCsaJSzPDX90Pc52BVvQWp4/e3jMT5axPOG006SGWtja/yGBtPAY\nn7VFOIJaW6NYQQ3iyo7q6csVksYyIrB+fHUVkbIjcRS0yUWfE9qyCkKd2N/l\nLNUqY3iyNConq2KgbcR8wwOgxUR/RXyCorsdJMVYejGPiUrhXqgTXDCmy7pv\nfix8PRqVngTLAC1AgBGYAzb1Le7h06JisRNPEK49n5cJmnazb+0dX2nsn4SW\n4NmW\r\n=yj8K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCT0+NCW4AA/PHLag0scco9WyRWf3oMmuB2wxX4JXXRAiEA0Y8ECgyFJcIssjfTDQrUzLLov5p4vzs0Nb5hEbqFgLs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.02213ebe.0_1629480368255_0.08510354493193573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.90a999b9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-circular-progress":"0.23.0-canary.90a999b9.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jdrbfdwj4w4nK7R4j+vMw2p34rYrAbYm5e7O4+oJGyynX6P+kbkwQUrAGSBcTCTUooDox92hgDKEyrDAKekA+w==","shasum":"7109a952e3facc5c2b9562b79599dbf7755aca9d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.90a999b9.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/ebCRA9TVsSAnZWagAApb4QAJtDun88fvjpBt19dcy4\nQ19jcD/5vxBfjySc5RD6XboXSxWmJOXe03OYzjJF1079wv+AbtjDJQB/9mbp\n18IU5glpiYoZ/QJPjtPH96XLL+o8yRUKTPzFn4L0VocPaNE/dKIkDcKBk+BH\nZO6v9wFE687RRi7m/YC/z+JhMfzGaJwY5NmGbIUdl/rOMgLbM3U8N1nI5TNA\nQti591pP1T5z1ysj/XXZnJ2fBNOuUEd0cVFBJxxtYeKAgT7HJ3bHnyd7GYsK\n3SOmFgTSjIWvrQjxM+UMN+9htkhck36u/54zQJ6u+t+2riIBLW9p2K/x2gkX\n4Y6LfeCZKqrNcHir1/zVGZ3NE7//54K6YkASSAv5wSzLywlmysHjyglQfirQ\nLQGWFcJuXUTwqPr+KxYcgDAw+NsKNofqXxvXEIr6yFKozRkUnjmMdtskiJIg\nOwCOVGXG+fvRsrZPmPTaC/J/JWSvccy5bwcqPAXX/ABOhASlIUWSTfXUktDg\nsck5SYF2lSqJ/WE/Kyi/02H6+e5Cv3Gu1dEX6wRdbjRe99DQ2mMRgbvJ//XQ\nYNME9B/ROQenryV4OlSxsxuM5tWb1yC7IIc7kVyWMI04+M69gDm8utT51RcY\nVlOlFbNTnpNp7VyEdF02qg9RmrouhkIUwy8Q73p9eZlvJUnNrynn7DxVwYLV\nclWJ\r\n=Cnr9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD74t7yeOwe3HHIlA5drg3tJ6T4bC3jbFhWKTTRVE1degIged6bVzTuMA08wokdJWRhSfuZUnnyzxGZdgxAkScgl5g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.90a999b9.0_1629484955825_0.6471411925749377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.6db58716.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-circular-progress":"0.23.0-canary.6db58716.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fX50H2587BLLNzlBaAwBe6IQ+V2LXbCrm24Uy28GGA3u5PEQcPhofgL9oVCfMBLxBjcF7/LhP3Wq3OYeumZNGg==","shasum":"49b0122429681b7fcc65dbdfd396a2e0f2ad7c88","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.6db58716.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VpCRA9TVsSAnZWagAAmQwP/1Zv35QsEP0PW/yp0jow\nwlq+CgMRXgVFgWm7RCyPCOMac8wCGsrKvRKDtDXAoT4YgaeVAT7fmjbC6joI\nXi524Dx0dGjmD1hCAhTEVh4h86joQoFBdQ606qr9Tm0lVxF3Fna5NJJknczI\nAi/uSvLK+GppN2Qev/zsjHE4NKoGwYx0egebSH6o8ovIDD290RgSF/OlgzAf\nkZ+bCmDfyGb+AnXhSMPtJc0Il5c/s3RehFqWUYi5SsTRs/vEtQ0Up9nEVCwR\nM21eRu+tz2vapEDyQs4mWyG9b4Z2/rQdzUeot1/LtGDSv8XJv8MkOnJs+TFp\nBOobILhB0ACRFlnTBNknyZpfBd6MEW/AwZvcio0Grx+ElQjlFXQj/LWB3rAR\n1WO3u98yLk1XCw4oMbEemGiFzJCpCZLlN5ZWMUDODjW10Ei8jU6/y4yKAVAN\nNZEFBJse0pLLHx6rYbYbtCEUOFx3xgUg+oxPlEjaCHs4bK6db1OUDznGJRWj\n/pLEjbz8+gbfkmS7pTnKTumrxjWxn+5nIXUWRGzvJUDHR3Mwp7lsOVSfGeJi\nshoR+JW+wa4sNgFpiA6kI9x7/xRHO3xWcD0uVKuCAUqj8NDf5MmofPBHli+w\n3wrvU9QJAGRMpWiTNY+/EtT3mzdqlKwJmeNgxRD0UZsf68+xlEmK5j0HsjOR\njYqN\r\n=jze2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDGuclsQyemLUe6gWuuqpAywlDILmPmcefIm/EINKpIgIhAPBTYrFYmf/vjLIsjwVorK5S/t4ST07jaCZ0W6JqcdJE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.6db58716.0_1629709672868_0.4362118013120566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-circular-progress":"0.23.0-canary.9fb5bc35.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5W5O43HehZNS40H/Z0ET2x7TihZkftStAdvCSRVq7tRfqXZc9bswh8ceS7ZGvwNeE8NLkHKqsjd81Wm/giyjtQ==","shasum":"221feb5a15d7fc4208e5961b1d4d9668616d0e99","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.9fb5bc35.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYjCRA9TVsSAnZWagAA42QP/R23v85QgmUaJJgc0Tr3\ns/55+y+6d65gwmrqe9TpIcx8jEV9FLUcWlKFA7DyBgUXz27J/mKnl1nyCqeZ\nSqPcEkrimkBeipFmLvd4D5xjmKcYep2E0ULrUJRXhV2IEWalBvPqRSCusyyT\nOrr5G34CShEqYPHxnnw4004J5L2LW2u5sSQOaJ6n4kN3WVPIqcuOC5mlsG0U\nQC+zNT0+pxadIUwOo6prLC0ZYPwSOxUM6qciLCw6nNvzNSJzECM9dtXFalz3\nS6aHuPY3oaBvoxEDovM5eoqrdKZ7xnaM2jsFNu+u7uRY4aZCrsQs5aGuOjTa\nl49tO8OCugrIDgq/RTRTQmQgybR+SH0HbQgT5JqlxuYINZPE2eUlb+P5R43O\nOx3ToD+M1WzbRCcDr+pDbCaoH1lmXMOwogxaZDWFpEo8cpXgk6dcRQeK9pXP\n9V9mRE6zP89EMocHvFt64hrPC+bIaH03WfqyKW0/3Bjz5fB6r6/W2PHwEkwC\nZ8q8uNJpdaBEUtKD6CP8CeM6nPU68zOnrqSFzFDwd2nvhp6kLr8jOyZIEg6d\niwPoLM5GGGRVKybeH9QQPebBMI9ISWaLaTNbKCWYdG3DK5wTuKtAdEfMwitR\nEcrC3O1WpkSbURGyxrS7rd23ZVORPj8dlKgeHp9iWvB8vhGWSYFOSXxQxiyz\nVdbz\r\n=/BrR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGU1kcNBqqkcf28jX6TuOIeHNw60TgXiZBVtqFP6/PxYAiEAw8VNLg35k2UOSnkd8Ub6qlv+OD4qcayFXsCAS6KzqqU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.9fb5bc35.0_1629759011200_0.8223455699852174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-circular-progress":"0.23.0-canary.ddaa5d8e.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CMZ0M5+ZujuwQIu0kwt68TkLCoBCjAqNf3G8/OjLmm7Nic46BaNAqAeblz3mFcrZJxsYfOFwUbKn6K87D6y7qQ==","shasum":"b020964c745f6d56b8a33a606ac256af50a30ecb","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9QCRA9TVsSAnZWagAAN9kP/06IN5WPeLQBdthCtc8l\nx2aVoNRHiyQxfOxT7/IAbnjPI3In6bfoTWrhp32i+tcbQPn9CdgYCemh/uyr\n1oXqHp0peUAIbBDsLd3ou46AsArktyqJMW3JVOM4X/TWX4mLOmNabFG8LgpP\n+wGh+Ex7GiqP1eTTb2Yq31V5oblaPwu4kTUFzjDcHQxwJQrF2cKc7sYnMnOD\n/K1Ep4bY4PYfMcRVMOZmXBeZTWDyj8XloVoNqUfYDTQZQR0jSwsOKmxWAcqA\n5y5Q/u5l5a3Udak5ni94gqrZkKCwUbsMguxjnqeBCt0D8cXv52+aqrSKX31c\n/pFLPjd8FwatUR++unYQhZYc+agy0WczuE6jDBLgN0GrpLthywXG6wzrsnyR\nKomjx86UCdgHO56rfXAL7Q8OjIHWIL+HcfZRhhRqqhYlHJ6WVcq1iS+uK7j8\n/1XJlsJsJqjfYVQd2T30ZuAh401yIJSqwlDheoGT2lwVuMb4E1csbp+M7Bwk\novbK6pfPegYB59Ut2HFExjpTDfhLHSb/2kv57vsENeqDE2h1wjTEsDouIeqb\n+xXHtcLG0Vkrn32MFPCHdItbLgDhlUu2yWIgryHMDDxyutN0IcfxcXgRDkuy\nqvbjneOxh//Vq3snCDLIukg81uONxKNnpi4f//XUxIcqQTMq+zjgN83GXAHr\n/V7W\r\n=vMO2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/kqJTXgim+ArbqVEdHy4q036SH0NaYVIn6+nE5LmYgAIgTt1sRSgJT0/dcazACmc3Tc+xy+7/fVhyqksAKpgqfNI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.ddaa5d8e.0_1629830992242_0.8622929397047752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.756208fb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-circular-progress":"0.23.0-canary.756208fb.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jxjVaUtfy2wSJ68DT/KRCxJeGs/pUjJqCi/GU1E5jBzEQkYFhc5LlT/cY5RFaygIeyMmapnBgIM7D4NtN0Q1uA==","shasum":"2a6ef859027005937bbf558ba20adedaae02fa22","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.756208fb.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8LCRA9TVsSAnZWagAAtFMP/3nwsR1rKuOelnZk6tGN\nmutEkAPuNbvXn9QgPp6fX8CKRcIQE//hhjvU2DkppCIdQShuHIjRaryHJ3r8\nIj2gPiqTF12ehY925bKadUSQUU6LcKVYSDeRsZTvhcSezL1u6AT51PqKcqNX\nczc6dfyuiYwC2o7HsaPK8GzKIyFQCbsCIhyUoZUo0sOLq8s/DH2AGjEqJgzP\nbe9WSZoiTQ14G3Pt6MqxiaOeobOm+JHvhyLxClewv7WbnJI6HQzeE/9K9IB1\n90IbnxXbOtNevLz1wWAVTJp4b0/QeRQIZu5nVs+mbKiPg0Ee/n6RLL+9F7yH\nwNZLIQSzX2Qwi58pFGcspZE9zvnm4SNsKKTB+q4936xjkqjEnDqgdjqYiG7c\n/zGyC6B8iShYiLARy3+nmMmSbgV0H9TIzhq8qJTr86p6aYbZ9mANpS3QwTsR\nQNWv55Xke/nPg4HixvKhBDDa62XydA4LOqnNRrTzGFZWrrYb65+0SOm2fZuW\ntJlUkNENMLYjjdqZn72zKNDeSL11NImAIRztNo9GyQZ5SloUV1HwFHVaFua9\nO2azhd05HbyOCSpsaIFPWFcjB9hVPSqiEA/oNKJeXbvDVeqlsPzRv0jXWqK7\ngcSaI8pNA+tZnMKw8ivwkUnRQjcZgPMf8HIEKMdLzkWfz+mAFTWke4aGB0A5\n/RP7\r\n=HCf7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfvhBE+LAeek9xCMRpM0iFDMO2M9LZ0oVM3pXXanB21AiAkRnpTyNXQc91OoNWSRMLTT0fykeFhxJy4ECoFFcpUkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.756208fb.0_1629921035223_0.5569146074702531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.9576dcd9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-circular-progress":"0.23.0-canary.9576dcd9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vy4Ou66tok+l9ceGikfcvExhcykoRuLx/kM06Sw49FRO0WuF3zY3yLVc32XD7ucfY/DJ7EzcAu7a3em6H2Uucg==","shasum":"cbf486d46050bb975b1ab23201cf885c9cd67e40","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.9576dcd9.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmcCRA9TVsSAnZWagAASowQAJsZxOADXzuVTWvP/0n6\nFjG8NCSAdX7onquzcNIMB/xBcwibdexxtvAXTS1Vj8R8ePsc6nve+NYBS4iV\nyB4Mie5xeW+UzInUH/dTjOLQuQrR07v6J8cjXappzadblVMqUzb5azO8NBil\nivj+HzYVCNPZKshyR0RWxOFDKlGgC3PSszdUfvKdKpPohmVEEn2VO4tBmxOQ\n9tw3VKNzmhxYakxkEAnBEEWk+XZv+C+eWFBeYlnu4BhUKpKC6258q/1eASIL\nJgK7HeYVmbG1N+fq1uKldmSABEC0L7mHQ0xsH9pJRSZE8HIGXqYGO0AoIahL\n0wwGRILWoz8VPCgSRo750ZdVAt0bHrjtlRsrsygv89zXOT0decRIqPh/UTB2\nrVENAgBYDAikgI2Pnlp7lM+0EDdREee1oZ2UyWCG578dGsgq4sOhSx4WeYaL\n9nzumJGHIHb/tPek9VA+TJFMgDHeXoWf1FpxqimVGxe/XT5HQWQX4y5ZMZH4\nGFLMth2XOetgKOyJ9M+D6SmJQgVeQZyY7cePzj1yasX7gw/tzyhdFVpExojd\n+OxNhlJGOczSnSalOLtDK1fPdv4/s3ug/Q8qm5UKhYaADXp6/MCh1xK7d9Qh\n9IREDu4M6SozDAuHJdK25hQqJFXeWjS/QATlJgJaXV0Z4f/Jn4qIIbcnmHPp\nh1v0\r\n=PXL0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjxXzO9aB+I3Cubnf1ImyLi+/CG84ff3lc6gRACiRcsAiA6ZHJ2VZU6D1pWKpvsyCjpmnAZYnatm7OT9l3fCCf30g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.9576dcd9.0_1629927836347_0.401551230305373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.7531cf97.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-circular-progress":"0.23.0-canary.7531cf97.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sGAWWrWt/IpOsz5clDDnoWP1lf6dt/k0uHQj8+aMnXypb/Y3Uf4nsvIay1fytzs7lew5mMX+W8s/bbhCxK4aLA==","shasum":"c36e0d271c104eb101f8c7359e187d0072552a11","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.7531cf97.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86yCRA9TVsSAnZWagAAuigP/25qb/cZryDdoNM8drqb\nFfPRJx3tyj2Km/Tzr305O+8yvMIW/jERZTtcse6ARm8V61nFpvHlzdtGcMgb\ndFdckcOaxDhfGl6NcrVA5t5KWoNbYlSbYHWvzZpxQGaiYv95rrZJzfuZl8l7\nMtNUyc01Y9vSc/xTGk8sOi8phQzesqotmWWeWScvY08GpHcJr8LdEPYc1MEN\nB1jdZxT9AV47dlZu5Gc41J4hpzTN0jOqtmgjVtAHFBH8hS7CBMbnD/cQOGgJ\nwxnxnQl68YIVBuve2FXTPnw9rwMgR1hBLiUtwKk+5l62yzr613xnXgojtTO+\n5nDG7vvJ8FkGPJjKV9SXSEDV0bRsrXrP8DuHyPoXmNJn7oyf3YJlqDIuoz6R\n8hJTqhAhUYjxnAh+65ORRQq6fYeb3/nGmA/QhP1tvAz4TtxiCA1j2xWyw2Mz\na/vTvKUnMmyl1DdmieleiMcpL4czseSHk7rw0Ikl1ofzQGtIjzRZCM/gQjSZ\n6XO6XG4C5Ekmf+IkOHTLD+ZBvQ7dTFb4fGAzmoeWYNzYJ9ixH/mQJGqoI2wG\n1Ri4QOYMk3gfhWC6uzDY3YIVHGVm2MWyPhTBhso+0sH16oYrFS/powBL3Aof\n2Ca8bD0P8viw2/Y7HfxjO2E+cqIg/tf3g5WqJ/yg076HR/47Lur2k2giIL3j\n7cc/\r\n=fozL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOsxPUUhixFVBMHZD83m+ZmbODSpeoyiEPOvB5CRt4AAiAeLRcPNPwgDoRjHtyd1B69XEEEZrANQVmvp2JKiA5ZqQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.7531cf97.0_1629998770031_0.6361549113811975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.3bab26b4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-circular-progress":"0.23.0-canary.3bab26b4.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YmZmtaWldVNHo72v03fKwd2uThF+VvuKTygSfvFSAK0BUoHuCZocPMn37sDuL1L4hnCjOHbqEziq/ysVbNjvRQ==","shasum":"4e6dbdaa24ced65f3bba05bf9c4017730edac071","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.3bab26b4.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtRCRA9TVsSAnZWagAAFy0P/AsMzqK681m43IV6cPSR\nrd3zLwB8lvw9z9FXsbCk+RBtRV7K31p6YViC7FLx1sGITum+X461I+dfAgnM\nrsFsVVco9Z5pF/JTbPF8olRCxyXqWSswPeEsBO6hYP6EAHi0MHYYs66I4Vq/\nSyh0E18r6docXc1w4D2gkpPqa6Ot8Jw3JOnGoL+OK921J9i7mL7VODucE32Y\nMYQeFxEy8v6dA3lX6YpCkXwB7C05n+Z0xrfAtQDCbxjpOKzSaPEekFoniVdV\nmsYXxzyaWN09Ao4Z9qn5lUdAFlFpuMM947Y/kLQBtzlj3+S4lcxEfbHRFlyj\nE3ZdrQr/EgsB2gKfyo7xwu+dM145Za2TTOhODc9JBYpHpmZ6CYg6TMSQj13d\nNdVsDvo2BaazjtrGrp63EEeLw13oBluxZsWbfKGBZkXd0ASQUAb6nygJUkeg\nBzmz+Du+r0JJNKRu/LPOIZbciAT/2GrQTGAC2e1+wFycwyr4QkKqsoNIqdT2\nW6GOyUPAwN0jV8AbGteXfMFFA8AHYqEKxL/b8qrXLD5uzDiNvysU2F27SXCb\nwr6k5Rws8r7VYMF1fZd6nupvqmGoWP+xnFiF70PyggktjadVjMk+0hMDYdgR\nskTvyRAVur8pjTqZAcwS5ENQUEEyD4GtfQ6EmwCf0NXaP96H1XZRkKqf566n\nA+2N\r\n=2fj4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU1w2418inhQonCWZ1wephw8fTnQUz2iYFJtpZKsvglAIhAI2uWIZcp9hQRksDwHWJEHbguBxGll4b7EFpNfF6ET8F"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.3bab26b4.0_1630014289205_0.14824546064619892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.fab48bee.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-circular-progress":"0.23.0-canary.fab48bee.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gq86pMq9CI4hevo+OegsUqDLdYRLLy4rHd+C3GGw+XDRS0hFOK8LvEFfqszoGrOpduw6mDBvEzrnG5lXslNJBg==","shasum":"fd3f624b1db31f1451d2c5245a9994f4bb6b718d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.fab48bee.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCsCRA9TVsSAnZWagAA+f4QAJFDOYe5BL3THWtKKsKI\nSe6oX3RPE+XHgGo0gS9Nnc1uB35DI4lqjPQDCE5MOyBRW7u2WwPGSZGPIyJO\n4uy3iQ5AntQ2AwNMlR6E8z7MgXJ4fEll19Mf32lrFTOzlu58x3Wnl/Ccdvfb\nrfIFKFv2f+lW9Y0kHsgIGHKKhoO4ZyolvYu2ZCOXR1jWnVf1lwjfJP2jUys1\nVBlDAUI2280N41fSu5YLGS/J7ZAVuw0pQAVWFOrHsbqtKusRtSxh4tzw9Dz1\nc67yca7dhr1t6OsU+HmxGQyj9ccVvf74VoKRF9INjczjkaVfWj5vcogg8qsY\nEBSfgqYldIT/tR3f9iVNIKfqspUuXCm3jx1BJZ/IWTK1BGhk8C5Aptz6haxC\ndjX7E+56yqoJjlihux5+hq+VY5u1FKWOAPFi2kc8j+ef+X5Yqb30AfClfzVE\n8nldSYe0h2dmPY2p+5eVey1dNbFK9SVK6hxOeDPL6j6iriIirkPgy7Od5oZg\nJkpHkJA16Wz5sagvx5zYffKo1sA8izO+9Ee4k0Mq0Rd3QoWrZJRWAntQsHyv\nJrUAytvPWpb+Qc93a3gGQCD+4aN9wNCzvhrPot7ny9jQR7hYdVfJcbvORmwu\nFTqTWRodNhhVpZu4r9JNwa6ZbmN+5XJLlzlGnRqYVQD5Vzty+HmWW/0yyzKb\nvDYY\r\n=I3sb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhu+5Pf4CJpwHSqpmJCkW9gsVH6OhzkF2/JZ8chHsj6AIhAKwdKMCpcDHIK+tkAdRJwu6+c3A+2KfNdGysz2BDniae"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.fab48bee.0_1630015659994_0.9546921424848884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.dec18df7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-circular-progress":"0.23.0-canary.dec18df7.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8ESmkCMdNQSD12ob8Q8BQOygWZwZXwxN9ujXZNF1nhqp/grxg0BgZ8sSvj4GFES40vxzLEAb49LOFLlxerXAlA==","shasum":"1ef55d5f68d7b6bcba9a2bcf168793b595ecb85b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.dec18df7.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbECRA9TVsSAnZWagAAJbgP/0qeW8IaCSpfj242mP46\nj4nF2Wj6BtwEdtj0kmB/rJb+bYSxwnRFxUodsQ5An3nB/cWaIA81ItVG2f+8\n0XQEVY+vZKjCjB7IyIg+FR9mJ2ecPQR9cAp8zS7PX2o74t6ZkUjNS6NU+Z7t\n807ofbWr7CNjtvajXuaKgWqiHbtEr61Qny/9Ya1zWXM3eKj6rS/0osRQkhGC\nQPPL2HslI0JoKm8E9J24BhbnAPdkbvu+5csm2iZtOTbJRJAIhERe1sgbq+52\nL0zG8WDX4Ry7GOq4f1EH0Z6iT4lE0R58Wb7QzNudgLX3z7DMjV66K/lwMJGq\ndzSu3tynU/wBkQddcFjMDi81sTC7HaiE5ZcA22D+vTEAjbG2Fqo7vj7tq2M6\n4Qu7w06py4YaGauTtpJkVW98+9oT3rRclhagc60xp7VmIb8ukUBX6d1936pY\nsqNEXeV6z29oi+GL2QLFcngE1TlGh4cuImeYii0eXd8OqTyNlvVLi0iMtx/E\n9f8/EZV8GcFSBt3hCgxEPcvVhD0AMdvftp1+P8xjEAZyVoM0Rkq7N2IUXvUl\nhE/L9sqwAxSj5fzMhMl8UvCXik9PPNOBM577oHnLpNhI1P/asaAVIVHadr8I\nnAnddU8bd/LuvrNgF8qV3qXnqC4IStjckQ34p8lQeLVrWbZI3vQeSASIpc4g\nlaYC\r\n=uvUh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmHcAaB1jjtFp9Gq3TBPs++zfPK8cKjB4AQWFkE3JM8QIhAKth4FmEqX1dtrr5bAq2UCaPmSVDG+rS4wi+qLDsV09I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.dec18df7.0_1630312132019_0.4278568987352289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.61fe5b17.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-circular-progress":"0.23.0-canary.61fe5b17.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gcels2X07fz9FmhzLQALhzdLrEgwD+ZPRTsWh1mnrlsw+xMnP6wQ52xnl/SGucN0CniHONKqkVsvVL0B1tYvKQ==","shasum":"5d42fa1b4a3af6609622974573a893e2a083c1c9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.61fe5b17.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFnCRA9TVsSAnZWagAAxpcP/2sg12CNKjs1ZyRFXY7L\nU0qqa4MtYoKk5SiGVfBVHPM5peWC6MpgAzRmNrISl24WlrPg5XMrsYSKfxGy\nU0sSx7dDXYkkB3MujAjuzbcitfiEFO38/NolkQnBASq5UarHBdxXnXUdgpAF\nNjRpwUNBVt2anNMtMMCw5Bqj1hWM9Lx+zWU/6TXqbfqikF+cf7mWj6eHFV1g\nYqXeCaoi1LSyk7pbpG4LQPKqMha1TSMR1bp6MSNvks9qG/DGCo8cUvTQoRdU\ntrDKzGLPiTk4R50790LZqrialLbtuUUim4r8I+nVIElI7Hict4ZNQKa7ed6k\nfAPsRZg49rZu7TEyJxFJeJ5XLpMmC149YmcqV2MVp6WPJblCoII/WcJNe0gO\nNR4ClX+bjlqVeztqmLE0B/gUwx+Xi/HMs57n+8CQBgw6eURj8RW4rD9do4Cc\naqZLRFQGipCZ2H82HKANZdFdskG2vGVSofToIw6vu5OXsxDCcJf8W8pDp1eP\nLxCl+1KdJNAteQy/lX2UvJBATe7jMJWm8kef6xQRxXOhKXe2E5b74EgMe1Zg\n7KNNoYvbRLt4rSCVAkWznZj73MfASiXI0mltNYO6YpYS6SDSO0YekiDHyQG2\nNugeeQiK3udIPfJz7TcoxeqAwl27TJZ+Nt/EiWEC80hqhaHqwgywJAKNnqat\nq/fm\r\n=vnGm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHA9HJExcMKpXYbkJuh3qWBweDe1oLNOHM3ox1ZnECIDAiAY5Nyi6KPw4ViPdylrs0IYfryyfYO2eCMG3in/rhkn/g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.61fe5b17.0_1630351719785_0.8540328469929006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.a8c31f54.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-circular-progress":"0.23.0-canary.a8c31f54.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DYZJoXFSGm0EiOgzSfHmFCQLk/5WzV8CNdKafBS4lFTFJgbrst5nhtVmi9T9aX/k3USrlA+hbvoOyOvLp89vwA==","shasum":"9a7b17a51be92eeb1914b0fabcbc2df82943b816","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.a8c31f54.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAhCRA9TVsSAnZWagAAAxAP/29z0LiJd6hEu2ZU713S\nCsqM2s4yE+UrD0fVPV8kSZcO/0mhcmO/dmQ7bK2DEKRgLyXDXJ/34JH1m/d8\nvsEvAYS1QO9YDqeobsDaY6YZfrEdnovm2kHkLzE3Htt5MD0EZ5LzKWahgOfc\n/1cAyeWwuCuwYBJvlq+/LyMLVFQ9jVXMPO6qS1XoVSXstdOZK29gEqMZvBZH\nrFb9vs3wR3whZZrcuqfPKx+ZmjcKulg7RSbjZAOItGQj2Nrnp+qs0d1c3Kbl\nxhcc9L5hKxPD+ISjmj3ZcS45Km22Qm7pSXN9HdXEq8SwLU67Tw07ybMZ1w6X\nrvOz3lScE+tf6jf4a6y8xzTaBP7ZBNdWP2xMpYB7VdUYlTGcZ+4H1pQP8Pix\n8Z3htQr+Om+oFhuLLdka+k3GzVdeo7odoBLy1id52k+e/umGqJionczf+3gI\nHAG0YLpCLgGwLr6+Ict6MGag1xJ1MjrRPnCirEWMfbPftd1p6z6ZKYtd2MEL\n81KRbEczZS6MHuOZEuB7bVPR+kBHhb0VMRs6yOMHdXTfaUx6gs5Q/IDjdaLy\nYrJOTLa3FQ0TkulIAjFJirFdTifLQAyuX6obSVnCQDqcaHK6LO6B/IoLVL4z\nwU9ObYvGfBflrWeMpkXczqKpBzcvNTef5XV2XwqGUsGJlTqa/EOj2Fe9ei8H\nRjTq\r\n=M3jo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNW+rmDmp688eAzhhUQ2KhSkh3btg7wB0y1jBzLVkVlAiEAhdidsUqzARo9inwe+IJ5F9wHGnPupwucBx1n+UPt8SY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.a8c31f54.0_1630355489614_0.8693735771503144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.a096dba8.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-circular-progress":"0.23.0-canary.a096dba8.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JhGATzVsUJFmmU/eFewjONPs7YEDQ1K8QhsdJij7/oKshRFTt8dC2ivbkdDO+QaCAzkCZ95yCtPiVUf78+uYCQ==","shasum":"3ae373d63c762a42b4708b31897445ff16098d04","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.a096dba8.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrQCRA9TVsSAnZWagAAYXQP/ioe6eBireHaADgg9T/1\ncaRt0+fPgMMNAZRKDgjZp6iUEFKRUJH3caNg8NWxpAUsOzwb/RLMDfKqlusS\n0aCmwbiv1HyWx7aT24npWWoxWxihzSfyuFL2AOjeYCAT2xbvEe4heuo1AWQc\n2bHmKAYD+t0ob0YRTBEOy6G3bP8+mZY6zsAqh3U7IpQkzrNUE5kVN77e0U+h\nsIDTHc7lg2B6vYRm5I/RG3pxUP745LMcq8Eb8Y93s69SL5LdRTdRhy9WafBJ\n0rxQidkMgGkV2rZvEgHXEArFvhsGqzbXzZWqrMA8gCVkGVevLIJLWUKUvx6z\nXvOHWVQao5JDJW+mTOR9TysRryt+v4QemaPy9nTvXuOiQkkWv7uMrsmz0H9H\nkFd466NtXxLUsf13qaI5GCRvUFvMoyv1d8s/UC0BCM7ikOaymMcmfum1f2yK\nfRMJcHih6xR5wuYHV9d6B8Ur8XlbPKp+tVepTx6umA6qMZ+LGchNkE0JEkkk\n/sqSzsQPV9FK938ZYCBIZw8AE2/n9nNwQblsYTXXDjWYj9a9A2khp8s+6SLN\nr2hmzOlqFjgaq7EXKq7I9cCXCwjdf6m/NMb9cFJEan7uLYsvzbYSnaaCSlfe\noZyi7wBAVpG9Hsv/Uqhkv9DBWiR1HrTlOXVKt0W6BSh7bTDjVejcY/wx7zZA\nYwtT\r\n=O4bC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFWu/MR6LXEHKE2slj2z0SUY1Si2oIAD9XW9KSAFBa9zAiEAz8JbPsOdYrOBkzOb1myFJT2NTzPBKtrYxpsXtoMqhS4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.a096dba8.0_1630448336363_0.9352051313833654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.7ec04d47.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-circular-progress":"0.23.0-canary.7ec04d47.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i9mffL/Rpb9qgFkwN/2jVckRZNU2lCdNl3828Dk5a9Y6aa9hjT9DBuy334yL4PSPYH7W3H7nxkuOQ5sgw4WmCw==","shasum":"fc2e44f11db527402dcbe3f5e50bd96abce3ef31","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.7ec04d47.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1mCRA9TVsSAnZWagAAtcsP/RRVCFl62nIU5xLsbVJy\nbzgoQ+0bAL3xi7Q3JYS1pMYyEaQbWznV0Ib1EfL72LEODWKkDiCORABztPpN\nj23z2KUE76HepENy8TRuz4Tjazoy05ghYpg48nlSzZhGe3N1dRJFIUvA3FmC\no3xdzY/HKPY85wnmt3vumf5oJTNWCY1Vrx+tkI1Po+5sgDUqa7ZD1DWZJI9i\nBOUdcH98e28R7rmJIcjmMvG6s/GvATbPTy+zyy9ar+ijuvUsTmQZmlHk9x5a\n9biktn46CLMbvkeoUA8LEiRMuPKr8JKlAvgwync6zvBipMt3s9QZ2HDJ46KC\n6pCJAJf098p/iDWNT9bx5okI+qoytx507n8c/vX/zmnrDuLWpAQIWg6upXSO\nQoyP66pO+X4WI5jVbJBX+QpdL8jETNGZIDr64dbZhKZ5fNv1+K4quB7Wd5VC\nEslIOD3f6QUEBmLFtVKyy9l8cRENp1IQe/HPZ06O4eJYvnza4GY6hM8T5oxC\nakufi9+JHoL9dqsqmBMC2vz6VlY5jiLrcryjmp55hXNCNH9bdKx8mDSXtZkh\nw2HgE9vLM1pEg7Vv4V2a5BoCP7hG8VexEiny+INgae2HR9sQq1L9dsK+54RJ\nP1utBlMDDFEjlbuHJBgiSvENFwowRU6M4pbjkG87yZsoEHgybpndvrNFl6Pm\nMbBf\r\n=upp/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDREUmyWM7tSrile2ZV3DIqTczMVvsRzxTuPCrwg0moKAiEAkW7uMkag5PihfHZUvRAiVsTCZWqzq69mzE4jvAWuia4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.7ec04d47.0_1630625126695_0.8723904369694979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.d00b098d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-circular-progress":"0.23.0-canary.d00b098d.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NcBG43zmdazIueU/VG/MZP6kiu+pce+aruhixxVgy4v8QreW32HCKn05ZQ15PzAn7vm10uRU5hp9qODcK3zejw==","shasum":"a7baa6f18ebdcb479d917c3c675dcfe64875daab","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.d00b098d.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMQCRA9TVsSAnZWagAA3bcP/18Q31gl7jZxlZb4HB+t\naTY6a48hv5qWqrb+RmORSYnXXgsCyYfAkZaZkOOJ3IJnQunEu9AvfBL7ZON0\n+FMJYtEloypVRNNOtjc7Jwp9qcn9oOlmEzL+JslIAZVIWdN2P9KCfSnvf9oi\naHhuEHKAEk8y774zx7vcF15lKRjdAGcrYASbxp24odyjlhjMjKZ6Gd128OWq\nhdoHtxTGwU0r0EnL1LgAs7d9yKe7vISwXXL95hm36UOARI8btFub4pYf8ruL\nBbg9vbWqoGb2wb2mQc8mRUomKRURUluKAXGYGHo9StWY7+9InTDNm/qPkMbQ\nGR4bOOw8nQOOhxlmPveqnM2/xxLd5BIMFD7TV5W2YIQbLQz2fpxni0XOb/I/\n7Nr0WsMPtWPHZ/yP476jWf1JihaU8+RNzXBTKsXElCFnET5bbwRqJ0eLaMij\nwwosnpbK7Vt2WWKsUwHKBoN2AslK33K91MKoR2JWI58JBcUO0Ld8L5CO0XWY\nm4PMPToe3aBtCeii4OlJZvXa4ygd4H1NGZFSm2AYDbrJhlHLlG9t79odl+ju\n8/hRS0aZljqlphz1g7evsnnVuxsQ64zOXPBIozEY6fCfpIZNMYGcQs36ETAV\nsa1YODqPbtYLyQvWu5ps6SUedkeIyEqwRGhLR0er/x6LvOsM7tYAe4WVPyD+\nEJng\r\n=kXwH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDh91EGGFa/Qi0pPBB3ZnMXQ7Svj7bJSGZ/PlYoCFTy7AiEAzPnKMDvHJCtX4mkL25PZuzLKeR4ghz/y15Gcb83y4+Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.d00b098d.0_1630704399816_0.5028866632879536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.f29b3352.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-circular-progress":"0.23.0-canary.f29b3352.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bVn982MvVkhpa/W2RZPaKB93qIu8jpl5nxo4Xz/in9IfckBE2J6wy3bDKFvzzGMAfUxu5VJtZJ8nFw+Q+d0DXA==","shasum":"6441e1fbbd68097e20e68bc2cd9172b107b45bec","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.f29b3352.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xmCRA9TVsSAnZWagAAbasP/RRBxIgOM78RbtMQrMTV\n+ODIyCGu6z9w3QljSKNRAJ5kZyv03sY4RZ4yf9wMzNII5NLDoPt30xFeFrwB\nEoPl3FPyqJKifEpmzdByQJPWfNECANwLzjnzhFhABF7PAnHV9+CIKa5id3/E\njTSQCzAaMxqQvIK4Qja9Bx6FntVpE3zrnGwVKmd1dCCq1EdBdHN69Y0OheKQ\nYe6bf3h3uy9bQdJMtx1hDBY1D9CauCIfaalz9wMCEazYxV9zkNsh7jof/m0H\n5+CTYpHLg+HzLEC07hoPvmCFn536Ko3p+yIAwDzgKi1BvA8Pw2B0bY3nryE8\n2/GC8tbUQMyb6yA9OcuSdiZVQjSL/v9gvPGmONj2fzZaEJOqXw/E08gds5DB\n8UGsa52gpYe87W0lonRFcKWo+Q0UXFVeFquR6JtDrfAeklrV0pyvQdQc0zaU\nObWRbW6E0uVYoESfX52PsYVGO7OqNfCZtxP/LXmAt+WrscJJ1fToCG5eeHvl\nyTh8j3ocjYHC37u27xKuErfd3q6orUWtWcMMzJzeNOfwHq1YRwKcyQSKBlmh\nLazLjjcjrcAkMYhB4GesM40sAM6aaVqw0xhQzOCjDGqmPknlB07YQq7CVsOb\n/0r5FeIhP0uIZRG+nvUWg0xdUbJtMoRDZiTW5tF/4QF3h80mQs18csLIySog\nJM4k\r\n=JFM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZU06M9jJQY9BmIDQjRxzPJKn4E58PeXDUPtPtfbm+BAiB3TFH8aiPKFrL9IKr5wnfWqdbVZQlmGEjVuOJNe1HMpQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.f29b3352.0_1631038566408_0.5748076497992458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.4962a163.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-circular-progress":"0.23.0-canary.4962a163.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0Qf+ofciKAxRKaRIw/vG3h8Fv1lmj4TYWFOgwLowBXtX3KfLhw/McGw3aa4UjEHMM/Jx7qRYWy/BkuZHb69yJQ==","shasum":"d590a16564a1150226ef8d219020ad8bc41184cc","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.4962a163.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tvCRA9TVsSAnZWagAAElAP/iznJ1y1blVjvouVH/xL\nutqGlYLF62YoildXb69NWjGMoqL0fOv06t3I5ZJEdS9HbEbCNQoDRrE2lLBq\nRQVGvMA4O5l4bW/ufAfb3jkNdaxyZaa/zLQiT4cG3fH2+wtKsWuaiA+ufw2h\ndRJpS1pKwS1hRYhyBsYyurZ6bPvMNSXyXDoBc7eFHW0j/AilupXJxSkn7gi5\nJI1zAJkVJJMU3n4d2KAbTcscyzHJYh3auX/6jKpiWQHWKXh/9whYX4X0Puh8\nEFJFBB5v/XQxNW2Cd4c5zkuDHVGr5ILIhOau4O3zDaDtxxnlNkWj8sI9BwyE\nVUmdd3uTuh4v68pmcMedY2gOIznRjWilI0ESrSiyP/ZD1YqUFJWLj3pANBho\n+Id28JMzRPNPUZyv4wON8uLnDGBeJ8sxDnoWpsF/l+sn5MvIS+HzvHaXdvGG\nar4rJgW1eLHtFlcwsca66Lmp7mF4H5J1N3PQ9XzW4fUoqKN9UZ1CaNBPsjtc\ncUg/Kfk4O0v/JOBkq0gj3ytnX3DLz7Qas8eFG+1bRMyjua8+YAuwLnN6HaG2\nneDgHop8BZRUysDM7OiViJVhARGJdiTeI5DdCGOlsueKqe8EXIyPu+/l5ij6\n3i1dtZaRk15zpbwItETfphMzK86Q8guYv07saDTch+/HVac5OCIbIawapy8K\nZhBM\r\n=UQ7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4yrTwy4oVU4+oIGjRH1Hp0DnF3aP9vDlnzC96+7XnWwIgTccVe/J1NoNvz+QNnRjV3eun5XzY0j5p+1czuEF7bus="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.4962a163.0_1631058799591_0.3603444331265928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.33102bf4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-circular-progress":"0.23.0-canary.33102bf4.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/mmtylLis2IOq/X2MKruZVJmOZpgffcCEYEjVbasjZ7a5trDEyYL6rSkU+swWLgb1hJvufsQgqeW2wDf9PjstQ==","shasum":"edd8795db204511e368592214ea06cbaaa05ece9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.33102bf4.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAqCRA9TVsSAnZWagAAOMoQAJi+O4Qo1dJdjkJ5PW28\n1KN5nTp4oT0ERAH8e4kfIojeN6YVZ+Y2v7VIJucQ7OoWHVT5B9oVHKPZx9wm\ne2saQ8Hs/xOyjoAXh/4tD6OoCcKY5zq4biRgLmedTfZoYZdcr+1Z/OVJ3fGO\nBGx8J3S4dizIIPIDwNUYJDzD+/8jp071WqZM5ZtboFlXcLne4lRZZnRObbwV\n7hCViQ3TpoPw61oS6TvQfWomzH4AGUxoyRZMiizv95SP+4rN7H/+wMVFGOpr\n4qN8VZ0pERHGPkrHmV75PtuSrzJixf4DrIZwEmqtvQezaqwgrPTMNulgd1Fk\nDMCDRqJb6qdmWd5sFlgdVQhl3Zid2BxaD9h7SfSC2d0MOuSQji1AV3fWTKhl\nunXLCYo9+UmXdMN9VR4c71PUfg4ydPe16Z5Aiu8+8viS6TByrbryCxtg2x+n\nOmkbkOZDdr7Ap+bRw8YcF9ICkNj2Fk9EfyRjMooZENSl5qYN664y2qqvarQr\n8Sktwip7wAdhoWlJTU6WMDjautERvRD8nm29MkZzd/ccwtLdtRbFm20trXBz\n10B3HVi/AdhTPQLa7t5UI4ii8s1gcz85PgA63jvkxQS8sMuoAj0YHy8oSX7k\ncjV9FcjIxdg86+fINrs/bcWoCb5stULBqkwM1FD+Gj8IQolF26CCejQIp8gs\n0wjA\r\n=QQlo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1R82H8Xd+U/S3tPiofllKyIUmRjWQkkCwemP9wVrNywIgZgEvHjYHodZBnwRonu5Fy5GRUqeG3v8Ra3qmUsNuVMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.33102bf4.0_1631060010396_0.36568973372923463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.76c68381.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-circular-progress":"0.23.0-canary.76c68381.0","@material/theme":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oPjW9/IcpSmsbuA6Bs6ldMWqb5++viorkQaIs4mcqwAvkkkoJtAZbwQWT9uDUmjoP5HO1aCmKUdFPMppFYQtHQ==","shasum":"699b51539feab0aa760a371fa3e0ebb7e756564d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.76c68381.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORl3CRA9TVsSAnZWagAAUtgP/3ptPmA7M2N5Mqm+eMOC\nu+zM2Q4Ok79pMWxV0a70AmPTKfnAsAFw2tcxiwh1TN6WjYAB4z1uZr6KiFvm\nd1LPrENtoYGb6Z2F6Br05vSN1H3bL9XOFw2GMXs3hPyKED9XguXE9xN5/uxu\nWmk9g+AA+kYjbMlIHqwx8gqRaEJF5PvsRtppYWSZopw49TSrTPFGE7XPTbaF\ngu7MRZD08phFffcF0vUktEjaRHNsswx4HYZvlErmwJH0X8IT19LZutH/18Rq\nYVi1c+4A9aM7YPTGuH2EXovdajxit/ALkUNGoO3xGsntSNYqyFHLZ0L0z52h\ncYiSnilbO7GWI8J0ztG7UwzkRp3FJ91BXUarlWCrbFyxGE8+f9TDi4m9zds0\n6rkWl4Dmpt0D5Myr4B+I2NaxHKMp2SiN67+gXQ7baSon+H54d5lWsp8rUzUw\n2PvWaB1It+WqLgRvgdHoZDD2pTUJFe+ZKbvS/dKUJhsmCukOHh7I7TltFDQC\nDfHTopF8MyCpCBf0ieLoI/ELD5mgxaHY/4EJ6+OPx+DqGhG8TEBOf4J7RFY8\nvxDCsAqDzSKWM3eBfZIuOR/EYwbUFypQqK2EfQcqJ1o6+IqVdF/ylR/jCRNx\nIRgzPFG3DgBwM7Vc+udqBlFvURfrZzjPQWUktkcyE2ZUj8qw4Of1+KxbF0Cw\n6Q+Q\r\n=o6PD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlKulj/ogX0LMj6iFteg8psq8JbEPEw6CB8UJcqkkoRwIhAM+4FA23gN3HdbHlMSJSwhALqlo4m/8kgsWFx84nYQ5v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.76c68381.0_1631132023241_0.3137658787978641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.17d51f76.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-circular-progress":"0.23.0-canary.17d51f76.0","@material/theme":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bv+S2aP/vHb3FKvVygAqENV//Wq5IfRxOL8dvs/W+vLw2dHTXeCNG1PLdcYY3fJwFGsEdx7WinigA01RL7uC0w==","shasum":"a3458d6af3bcdb51461399c29aa2ff048248a993","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.17d51f76.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaZCRA9TVsSAnZWagAAUlQP/Ay6XRFT6ydSCcYlC6GR\ne5akXyOTNQmct1GYIS7qp0dzHHFBrhI7ZNMZfq420HNjBBzu760mHSXiQkn/\nj2OABp/Vfc+zvb2WHmWrbF5qWdPp9xVOlOXjiUOPjSgflJbDOFQuhVAGAfbT\ncbA+6WQ+AJNQvMEX47S+4i2vjHuTeRPNRhXBYr+JKzEwhJvzUn30kncwbFap\nHII1mVVAryan6vJbQIoNUHuIDT6p3gqWL7VyWL8179YPFNu6ZFKQI915YiRC\nRa1ZexIkowIeG69wI7IGdTvEwvXOQNK4qI+bCPakhnMwCnnzHaalS3wzDOXZ\nRnnVdQiXp/Nl4ddBM8msitkOBYQIsT0KkTlH4LDISc/uhMAt99871sAG+tLW\nN7v6hjJpVltQf5/+yjRXepmdoeWffpVBNO1XpnzUdGn4JalbfGU/S/vNm6ce\nCEreFVzt6GDxiLuxb3JLzmdr/SyO06cmr198c0McPE6obcSProHHx2x3I9ay\nwBtgzULOBray1je3MUBysDrLRTBWpAC4ez8NKjTPLTM6siU0GWzRtL+vyRCv\n+gnsvxycrwyrGNgdeja6vkCXQgsOvhRKlRo7kAZhSTdl7SKdNxMvRnyyxdjv\nQg0NcfesfB7HAiW9CkC5kknyPXJC4b17dj+MVjgaCXSP3R34roGlI5qoemEU\n25Jn\r\n=ORe5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoXlD5Qeaa7qpWl2m8HdY0AwMWNhyZXj21tKUZ5CYTlgIhAPX5w/m/AKRENPyEvcHZVMsYuch8jATrH0zhkPG+ZF3x"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.17d51f76.0_1631143577210_0.7972606808340637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-circular-progress":"0.23.0-canary.3fae6c2d.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MtuaLCJw4Of3Ry2/SatIQpSWMmVuCqrijlYHp7V7eg0Si7AYJIUxnbK2y4SvJjIsxpOwRjG9MOzAwSxunyxk0w==","shasum":"5e2e209d7a3b1deedc249c65195d9a98cb1ffa4e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.3fae6c2d.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TVCRA9TVsSAnZWagAAF9QP/RKrw3cLzogy0wzjbuna\nOyfUUQakpkmHnV5njhUSwmDg7SMN9AS2TN+dHZXD+KWmiECu6edk4r+85grP\ngQCi7/Y6k5tTB8srxnho1b3H7/5wmwnvh5Np32WcA+jy7ZbBGTw1Z32K7MhA\nTk3nqcdmFbf+yqG7hJC+FbhGpakAIFNiSjm2xLY3pZpge5Pgvjza3Fa85YC6\nRgYmJAmc+dllcG/PzaF9EsyZgt6jruB96y4Cj/wSNRM1ieyQHIDzHmVRI4/N\nDSnEhMssL1/2kYkl2Is2LkD9xP8m93lgLakJAi7CM037trp8oMSArhMbbDmv\nzxQXsXNrljZyemb8ulqhZl7GhFz1AJPBIl+E50lkXiFUiOElxoOk2LPiWjDp\nNYLj5fOBTqbN5tkb3Uawkh5g0Sb5Ro1G73wSkCGEmsqyiTM/OdGRxGITBZsb\nPYUeYdIpHo57ad7Ro04OQma1AJchS4zMeMnSAaQzVE1mG2ABnYlcEO/rGet6\n8MaauV9Co4fkgF76mMpG/6Jr+zyTDrAbeDS7W2ixJyV5Nlt1R4aCsqDcmjNn\niPBFcNYuljIpBZbNixFr/SOxaiRmRvEM1I4H0b+gVd7MBpb9ei5n6OTFGgCy\nnzb6g0wYxyLzWNkqUbApyplPHCsK/hbB4xJ6LoWTbs8N0Z2pXlXSPF625yNK\nZuO+\r\n=qehM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuqF4+JEeo97tGGHt38ON9vTIbRNjGkdYpkqHnMQUMxgIgX58NMTwVOQKstYGDHSo8nYQaDJIgVWJ8x6TlLuJpHZw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.3fae6c2d.0_1631298773257_0.00010614845129586215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.f1958c4b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-circular-progress":"0.23.0-canary.f1958c4b.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G5rgcbeasLpyx9d8JUde6HZLHp7q6iDpsoK8f66sCV6jJhIAvRualAz16Ys6+CzUZqmdFqeb2BxiKNNWTUFO5g==","shasum":"adb8f26e2670ed764933ab0b0aa1241f3d948657","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.f1958c4b.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SHCRA9TVsSAnZWagAAB/cP/2w5587JNJx2rqIVVgMu\nFozVIUrPpIWDRKWa0IR/jgM0ekZ8SUmvPPN0kB9PFxZTOhS/UCKsZyoi/h/p\nKX1pRKvH5OeZt807XxARtKq4mZ+6UNgcz3UDA9qhsvx9pa+5l5w/7s4OyPyf\nBAASTA2G2OpDw47mIACUvhAhZQ8scz5k5FzjWZZd5H5E949FKbut7JlRhuP0\nf2cCejGJW6kSn6dwtU3ELcwBqe4I/ovmr7x6UoNx4/YHUkYgsID0Lkc3hmJS\nJg+b5nNmu++Q8VFbOaOOII2jdCPBBlDLsXzxw+2XI1p0XTCchzynA4rfd/xa\nX9bO4ZzFg7M659Ye9qXY/pr23VXLKP79/q5pDHALbD8AVC6FDudaoVBf/RMD\nqxAE/NWtJhHJoc2PfOOOtSmAipPKC2Y8EridCdIpZjcPSgSltccfM+EyIfe7\ntOtlwv0lXi4xUNMqe03lrbegZ6R+fC+WVPqXsDajjs031iTXuykZP52A13Zy\ntR9o9MwQ8ifj2taZXTPis9mW2CcAMsxVlxpnOFVzrZm09D2EeoaSoLKPBCQS\nUU9SHyrQd5al4nKjpeswdaZ6VSmsozapZZ3++rzsJ48tG5iWyhyFExi529cT\n99Ah368KioNNk3Ww8TK5stSgzhePm59hMs25VcGdQfKrbDtm8D5g0yG1lOGR\nmwUK\r\n=HBAL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0proqAerIBzXYw/uIuNr9y7xjRZLA4Am2ONMDfXfS5QIhAJrmoF5/P6uTucS25JumoncU+qr3wYmlsTvm7wEzYomY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.f1958c4b.0_1631560838926_0.061647256331408995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0-canary.78abbd59.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-circular-progress":"0.23.0-canary.78abbd59.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cousjz6jVYsYhmShWrO8AeJkYLz1HwQv1h15H2usuwFJaHqong3FiSIpl+1ALL9LUolYau/AUfgu+vLh6QRj6Q==","shasum":"319ec01097554da9a04da83bc3996ac9f40fc272","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0-canary.78abbd59.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8H2CRA9TVsSAnZWagAAIwIP/0QZhPwKijcBm37w8i5M\nOC/LqpQGsZNeRbkifUY243nHLnRF7MwVwRf73VDtcYJsoDkJfY4gznl4ulUb\nHglGMSKryy4+4gW9Fm1gMQRODuHrfrAUG/2bcAjq6PRsadmCc7WdHuZGHwKy\nRjP3IbspQUnBBeWxyJS/o7IlvPpmHhNzrna2oZzdXl+vpuDg5BbTjjVh/UnK\ncXopWcVGqLgR8mtf2mqCpx4Zh/Cu1GPSB9jgZKuiaOY+DXej527r4g4nRU2s\nr1/3Ma6ivj+q7csUZ44IHNuHBvJBfn4GVGHPtRQoTuBu1rSGBTtSxdX+BRFu\ny1fchQJpyXsE+CJTu0BWKK1wNdFulwoRrQmfvsfgsjvk5AW8Hv1clmt2PHZq\n3+bk+JShovmNpTdgVNtHKoD0skTxh/PENVUPTRqn49mKozHuRRLQUV4acLSy\nMRZmNXqljnE5n/FOBklXC8Fy2Yy6j1nI+H28saIJuKnOIT3Dqjst7PAumk99\nNTUrYXuBw6NLPKd6QDJUVSe1sETSIGRLGKBjZJ5aorXyNIkfuikvWGjvp/uY\n//8XlenOkdLtxzGuMrbrh375mZtdg36kAJDJzsOYXqjMf9ukzN0jA2Q7ttiN\nemwR0oDV4wLNnl30UTGLE1jC533A/qERKuQu6P9drr3/xq2tYxqLkb1eG1jR\nFp22\r\n=EHTK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfGUolvdXD5nfWQLoSduxL82E0YUMK1gxz2fLLsKQVRAiEAxYtaX+mWBltb6CEe1Vcs+GAT9Vpvjn1vsNZ4jOjyvQw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0-canary.78abbd59.0_1631568373910_0.9696356897594731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.23.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/mwc-circular-progress":"^0.23.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-PRGwj9b2juRP06v6Xj+5tWnP0k7Y9BN4EsxrucxOBfRDbLivHIWGWm3KEGQdpRl++kuirsVxYd2/S9oV7J2OIw==","shasum":"e6f76baaa7a233cb405bc5ae6676ab26ff1225b7","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.23.0.tgz","fileCount":19,"unpackedSize":51337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q4CRA9TVsSAnZWagAAtiIP/A/Au2Vdm0hh9yQUvH9i\nwRxMYAA1W0uA8Dgb0i3dtRabjO1B53e3L6xqlgjyMlXkh8j6+LQlIApbugzh\n2OcHCzPOZB8E0kA9opqKUPWWhkhFPrVxKpqXCLLZ1meokUxoph69yBHyuMms\nAHcdgpCLL7qqNpJ1pBIxWbw4OcR+y9ooDiKZ0CzQm/JqL4KZUgOil+CQ7hCz\nGmfcmW6cV3/n6wcUP7LFv9Emf+FmT1mkjqUCR4hQl328oy0Risd1gygW+Pcy\nOEKn6AZS05fMbAACIicbT3IEoLO9fV82/LZNX9N5X2Dd/0ebl6Wd/Vjb3Myn\nGiJs//56cMQTObXBa+eVI1i629m6DGtSnP/nqzCJqbZoDrSOu0YmDO3JOLQU\nR+AZkdcxHu/P/V9srxlvV4VANPDy1Y2Nj3uV1yKWc3ZTDtA3PgGJXA3MsKJo\nhS4RURuB74y+v7dWdcqsz8dAXxdKfa6HeptX2ND0YznF2wGXmTxkKxJ/t6gi\n0Ez3AGLR7+FRrl1AWZPo7ymZ/o0V/1gj1kVSPZBI5BGO/2bZVU8k3uskhKsv\nVEtXtOjdf0is8T/ReAwy1mB+BOVxYZgFyg01ULWxfx3SHvszVRo/BiOFdPfk\nH5ACywTAFOS1i7dIkwlgLjsi1CUTC9wYeWsmX7FLWEohg/gvLK+zUG+ozTMx\nII9Y\r\n=e9Gu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEy5zvS4h9vtc8igNrDmV9fot84ysdmnIOozCDx9D+1lAiB6pY+KnTQ1hfJNyxq2kICoOdywe3kBtHei8t6rjUeJkw=="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.23.0_1631568952402_0.8129345518800186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.9830d665.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-circular-progress":"0.24.0-canary.9830d665.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v2lY5E+cygN8+cStoOf8DSZ4bdoG5sRMBOOLdl+59l3UJBJuJ5FheeY8Om8FyJuGAARSBAQUrPdrL8AaGiA3lQ==","shasum":"1bf894729a4dcbae39532061378fe7ea84c2bd4c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.9830d665.0.tgz","fileCount":16,"unpackedSize":38148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SACRA9TVsSAnZWagAAKh4P/jyTLLlGvkXnvlJb6i+G\ntrKZX+PDmdsiuJCo7Yemxs7nzGTlSFLpCiu22wUQX4JtWHfphjAMw9aREgzy\nAb4D3vT7xPGcILajo3Ig1acuOVyOA3t+v7GCm1ImR/L2q0LdDzuuGdj5juiV\n5XAfIaWkF7yHH4pCQzN7S+9PBPvtISorylWkb9DAMNxajZWN1OA0QyYYuCam\nNJAJK9IRyieQGiRuBoTIFL54Gib/7sgXLLT/ngcy6Jn4WQYcX/4INZX2qMLa\n3S+6Rb9zjV3lGvdHq8NQfNadnGbyh+4flm4QYQ4QrcyWshpYLuV3LL3rQDPj\nCNEWaLNUI/ZYu+HlaGhSO4m1i9CGjZmn7PlBq+Xb/bDf99TrSdQSCwYcbSLZ\nBIvSmqqMm/8bMm2mgRfujZF/QphBN++nJc1LrOkLgkLy+92SSsMhrnPjM3dr\nA3vAQSOT3SUc0wyjzXGffvSwDNAW6REU9eWZIlI/Xw5KU5RGw4NLoiEDSbLx\nddi7d5dp5nO3Kn1tKMLuNNq/HwuvvlMMIH0a62aAm/gQo9Hv3tR1DU0WPLS8\nvrlppvV7PAp5uNyprIMXvraYtsWPEYBEVfbjMqEUF3pcRxIqhsyzsTHu+u/R\njAIMG7BmPiA3edCFckDSImicrrvDmDi2IkHNXEpA6hy+85IcLf7eDDSIwgGm\nKuES\r\n=h8Dv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEf7s1CX+R0tlBrCirM1qBuFpvb167lbCsLQUoW1gOHAiEAzlf/f2wvse6qfykmzvdjBus3h4G5Xw5Sa0UMbW3i6mY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.9830d665.0_1631569023864_0.9974127041636989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.20e2081c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-circular-progress":"0.24.0-canary.20e2081c.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FTDn4KwRo6iHsDUSNEymS1j2NdMkkIA6QZ4Up7nUQey+hLm77EywV9Z+rDf8Chz8CdT/utKxg56FJHmZFyLqCg==","shasum":"d09ab9767deef691c13d1fe006027e94c4f3995f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.20e2081c.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP991CRA9TVsSAnZWagAAJ9YP/iihcojqMD7U4Kp8FfMu\nCXTnNitThGmwAAaED+ci7WYCCTQ9Qk7ZYxIZfZ2jpzDMQ6TylBqsKqTWLblT\nTzqckIKuU4FW2XdrO9O0w46wlnuXa+fNtXBA/fIJey0aAFy7z5yAn02zEqkq\nsnUK65IlfS9HacWjeSmvgllgcg2jw6gKJevKzz79tYYTAwisQjPMBj7Ut/nv\nEu8jE4nyBmmIKHn6cPtC3DvNG7KkQG6eDxSj715VmpPdRIYT8nz91dw5kcET\nvcTyhHtFoQ8VzopjFrzobH4FOZcMcdPBxnszcH4axVwsQTf+m2xqF37CUihx\nYTXPSw+JbxNbvztU/jF05lK2zhUUTOXylXIGfklwh4emTXonUXj+6wmj8CnA\n7DVHqIrF0BiPh7p1LT/B8yzP+gWFmOKw3TYX5lxZnMrFSpi/smz+E9Dt/Wao\nIAbg6944w52XUX/XjMTwyJYiBfNxFMEvrkAzA5Nmdrc7UkpIgxjWUI9OO7N+\nCdFLRFqA7ZfGYDtYTPcV/BJy0eiQM7/GT8XJ46W0Qt82kWc9h2eP2OyjEqSl\n2nG9qWlD+B61lznvc7VuZoFTbRkstXaaygBtNATI2yx8Z/HjdDob5V463s45\n72/XmC8N8HdTllgQxmYjw2A8PUmjlEmTR1DZXa8yMrlJv+BvHncRVCxj+DnP\n4FJb\r\n=IcDD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICjoLGd2fxjDoJK90X5N5S/doIJNEdRhbtPGyz1T5lriAiEA+N6tVhtlSv5WdKCDmW8yLO1z8dXG/y0Db9MufeMASy8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.20e2081c.0_1631575925701_0.4506811771021282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.583613a9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-circular-progress":"0.24.0-canary.583613a9.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sNf9ciGaVF+L08dJ8voyV7AYFMAQ9hX0wJ2y4e7jrzaXazQ4YThA0dnQOXbBqbFm7KeDKRnxnpFsOGmhS0anDQ==","shasum":"f563e9172795952eafe03cbe3f5a548eae4d7567","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.583613a9.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPyCRA9TVsSAnZWagAACckP/2bTFNORFAgiqBgCJM0p\nR1rVEZ/i0J5Q5Ai43/DRcHcgv6UGe6XRkm/wECt6sZ6VmB+79tGitS42nb6u\nvOAvTmD5QFPkLWv9V99vgBTW66x90VVYn8VDawWXK2JsPnTEkCn86n3M2SNj\n+G3RuSf8QAxYjmpJH7k7vPnOVvLodkcb+b2XrUkoiDsNP7/95pU7EUAislkm\nEN9dY4P0sxQpAx9UgyeI6Wn3g5LyM0pEJDdfE6zwbEzN5r3vAPxyrNKRcm8l\nPocjIPrvaX6wGtSZy3R0jqbUp6cw2RoOFZpxrrgkiBe1k2uIDXiS54TQmMMg\nRbHrNr1oi3Iu/sn84gCJ2UbASzXenMDhQ5MFAQN3g71vbZUpLr9/eE+xoRmd\ndaWPN9uJ/Wp3ZzxUGHBuzcS044pDHoTp5dMy/l37nbxv4EL3QvB96skNoQZ4\neW4KDEB6CEO/Kfz9gNU1w/9JT7BNyMuk+abLE09DdsgoE8rsdkqwgBi7KS6U\nGFCRXW+r6e23BuugxR8SApd8a8SNrcCYKpWnAzr5aTa/A6CR4biK3BvHO3ex\nXjaSdXyfcw1O5JpJaQqt8FPZjj6zrHct/z+w3fGyO922GlahaWwhe6yOAf2/\nFJNaqsStsvDqd4F1IDAPp7KWHq8pw4AF6hA9XmjIWyeQ+ocr9okUnVC8Hg03\nCXwz\r\n=+7kY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETpESVnudFy4Bc4ODS5QF4/3pMBJroYdKrT0bm0TAlJAiBpyM6qxo20He/Xe/eS8t0Jz0yMZgs++Q0ZRwwTk5WJdA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.583613a9.0_1631638513992_0.9763003678905848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-circular-progress":"0.24.0-canary.0e1bd56f.0","@material/theme":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i/gFcYL5zHFYva106CWog1pa7KeGkzD2wao91JfVZsVsP4udql0eXtN3y7yo5toBHf2Jm1t+Onfpy67qqbTCbg==","shasum":"d82513220cdf01ff4419b72b111f76521abe58f1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.0e1bd56f.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNycCRA9TVsSAnZWagAA1qkP+gM5XWNPd3AdlOfYrorn\nOJO/S/joHkZ4mQuE5XluCUyPLlL1PGxn5rK+V6yiqT/Hr8TcU9VK06ZrffWi\nT7SH4Jxo4Jdb6a15OS5Emi2uzoewfdhftJH9IIB3RtIMtSwmiVsbpM+a4Sfv\nUpsNwGCJ4+8qXQRXuMhTLpd5C6XEjZIGZG+o6jm84mOjhrffDkKIA7VjECm8\noaAI5xuCqQrcVpg4iAfUM3PITyk81bUKsNaK9ruF2J2emRZgYyHpLNxwWHra\njKRVHAqDs6bYueo5NMxS53Mgtl1w9wSsQcL46YAHcTU3h2fX5P/ZB2oJcAVn\n3ja825ChKaNhlu4/FCYxxf2PTUtULTk3zIoBYogK4AmkFSa91JftiR4DqxC7\nJkUY5xgH/kVsrfWM6SsnlAz4ceaTLU/K8tnuRieNDcfuVH9UMhjN7ohI1WMg\nfb5/5AX58+1bSNTOtDj3m1yoTSxnMowmzVIshcR3ewLQsW9Vh8UOSKDVwT2F\nvwn3q1L/VKqkwSTIDMy43d70OAPQReSVNT6tgqUcLS+OZUoGihL9p7gJk+gn\njUapglQaCkbE6xWI5TFcYATnalHAXtU+MC16r44l6irJ+G/Q92N/Evjd7wZT\nen43YHfWXKi52LmKtNtwmcYNqPBXzjd69Bf8G1vrPJHWP+mYeUKwSwlGQYZB\nAUGQ\r\n=BEDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/ILf/Aqdfr4EGw/NBVf+DjXlnLmw+RFT3f02yfzMl9AiEA4CZSdogCDhs5ag46QnOd2aeU4lH5KRN7UT7ysETW2XQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.0e1bd56f.0_1631640732665_0.8720220307757363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.7bb1818e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-circular-progress":"0.24.0-canary.7bb1818e.0","@material/theme":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s3zK7p9GS04SFFNEboc4PZxx6C0AmBed/s70OyB0JsKdG3Ro+B/CI1NX9MeLCdlDdrbnTLriyClgE9t1tB6s1g==","shasum":"c3001755e6f897285f53a7a8a6968e11ca116919","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.7bb1818e.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/lCRA9TVsSAnZWagAAjkkP/iiP6/8NznXTZ+yPBct/\npuuqsVNYdkBAXqvdJcYs11TFXz3G7pef3PNK3xUs8XWMneLdWqBQjn6ztm3r\ns4ry4J6c1R0iGlcSY7szk5Bo9RjbxhOywYCZl2n+YAaH0fN7uRcoVOnnWRRh\nFXmu8Ume8jcBC5FbURb/nzT3YXoBU+K9ZXuMSSBy51fEz4RYHqnbCu4ug+SA\nKNzk1rr8DNxzUQkH86a8q/84jqhlBAS4c/wMngsayjdrzTRkB10EjIZS6ltN\nd2QkDBMk2uEd97i7U2ErVUXTHhwBv8MHCg3GXuecdqOITIcZOpTMoMEPm0Rv\nnc86D+ltccPbl6DtS9VF7gOXk1etS4I7889zNkLA5Ceo/eQnqceq5DFOqBKR\namM8lbcvSv8QEjaofIvvO4xdPCCiZ4aGGYLIf+Om8FDZ6gEoTte6N+iGZDXC\nv4RNeejOIYoe6zpgA/Vy4a5mctBk5koSvUoh9pmj2LOZKR9uIdTSkB+fbJMH\nTBWpSFC7VkVt3sMMroZ+vq547ljdP35VL4iVXi5YZViVLqpG/mRWm0gntbzY\nXykG0mUflZxCKXZTP1SYyiYZZnD0cqtbtoWqbavB5HdK6VhbbL1BJfwIdZ7Q\n32FEWotXU/LvZazpSn6B+kGDyWJ+9thsdxr+tB4nmT97yQdnOmrumFAnW2iP\nLUqe\r\n=8evO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbqj3h7itihfOLBGKKlB3gTaH0toubFNKc3pRsr1CCGAiEA1cXlNiy8OzfXaTNCuGgSYMr6a9z2wDuo2FQdJ/6HmVY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.7bb1818e.0_1631666149693_0.7359524155610457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.b5e665a9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-circular-progress":"0.24.0-canary.b5e665a9.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cVIRCt7T+2+w3EiK13s/h4i2xO+h5bg/44gjcE18GTAv/jTdNEW4NALZLrPX6+juKBI3islBvFj1Mx9ZJLfZtQ==","shasum":"eaa6fece5fe94e4e0b5f9d4a56607b2c541c12aa","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.b5e665a9.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjeyCRA9TVsSAnZWagAAp1AP/Awf0cqvVZqssXu9vCL6\n6bRkCBLjBzOZ9UmxGIdIF/QRfam+2WMlH93H17rVsCddAKSTBqdHpxz29lHJ\nWjQcfAcnYzrZqgbFpWbazK0qhm93DSIessdZmiCJs/rGGvEeWxQS+iVrdsVT\nZ1lXOBEf3wSStmhuv8HDdoMD9skWCkjJYOfF7gr3QPKYy3vJS0/mEat1HC7X\nhW0u+OFZlExCU3f8UdIABXCROCHBTE2rjvCrxPD2fKx6O0hPPPLVt6OHWxFz\n/C/0r+oex6vGhS12vZo6CjPe/q7ZK3UfTF8hQcGRuTRKkUZCDnzILmz+rr0Q\n82iWevy2Fz5zTL4To7qolDWHZBSic7zT00uqJWc5GoHsZmB6Cw1HU5zpzJj3\nEQkgoA57oLh4Fnsi1ZW+tZpv+hCDwKXucOIex9rbTI+eKXzjPfoDyLJkMW4v\nkHw2ZhmDHq/vj3uOD0/BQ7Cc0gl+/PsnN9QnbILH627X5pRkrow5rkQoEqs6\noitDvD4SobjAYf4bvoXz7cUE3MO8KOmn5tuc//nzXQ5CJtppDlMkEp7LOXxw\ndZwN7m3aLpRK6Wr9sGaa0JCoVy3q6ey/ObSoiAzc6guCwuOvRu/Gtu4oPw0d\naEXN6DeesrnrRChX7DEpGHAqZNYKATPgCCpz09HVoufGooFSkbZuwp3MiRmz\n8Ip4\r\n=0fE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfxxLWDteb0VZOM5+PSHEYektIq7Ii14K+LNxbnohgUAiEAiUVLAWJdgcoV80hOYzO+JpST9HOlYB4zPH2Mxlgg96c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.b5e665a9.0_1631729586209_0.9256587392733107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.ab1e177c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-circular-progress":"0.24.0-canary.ab1e177c.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m8SGqlm1VQIGXDc4ibje9/qgjLCUgiOpJbTac5WqcYEIBXsdhaiikt9pjpBm0Spb+Uwgh+hvjoYX4T2CIVhoaQ==","shasum":"762ef6ebf59899df786349e51410efac4125e40e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.ab1e177c.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8cCRA9TVsSAnZWagAAhdEP/jdv05LHx4LjdPYp0cit\n1KSO+GhaeQLAk4OE18ikk+0XTWmtUXDKQaCoVooJPVNgMKiPZEuZ5B9iLd5R\niyHdSDbcupaH1BGMj5cYhHhsGrZher+Csx074R5p7FoGO3DE0d46mSiwARGy\nMOhZEI4gb1t+vty8Xk1kKoi+Ia7EjoJXMCRfiMpPfy4An5PiRH/3Km5gmK4d\n0e3Bv1ldFFRDkyoiTtX4YLh7d2Afnl4R9c7Ka59ifHGhums+RjCROK0KCx4b\nXBPk9uN+nj0xq8tiHOv263bl+uk3+wB5LMgfE5HTtA4cePjDjplH3jfzgsIW\nDAtxKG/0ReLVG1IJsR2exYUx2vVgr8erCyaHqeQyYTnsxWTPE7B9eTYIvGtP\nkiJDSQGD3n5+8fnREr7fWUtCmaBuJLiH52AE6iMUBNqayV0wiJQoVckSYDhE\nTGekY4W4zdrHN+gVS+LKp6j9jjlMqafFNqybmbaLQahgtB/aWV6LspvTg92i\n5z+xRkkxh/LkYk2QflTe5OyR4oCSNoFWeNJYfS7TfWt6xkwlmCTk2iLNX5MV\njvOyepubwraeNOsBwmtIgwC5TjJ2xLSBf4z8k3yNfH2fI2MZ/raJvbaLLOn2\nO8CGm9v/T/C6k2jGCS7AD9FYDUxVJgIPhjskW7SQTU25cfQmqXH+S3SI/7g/\nYyO+\r\n=cIiU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9zIozXLpEXFoWe935xWSbI+8ROLd50lAu2pjdFc3uTQIhALo1vGdmcmSM07+ZPcEdaU+pDRcKVSWrKqSQsBt6a8Bi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.ab1e177c.0_1631731484183_0.8365241881128729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.8dff8894.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-circular-progress":"0.24.0-canary.8dff8894.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UabfeTTVduFivVgxOajC4hEJhJvl7u4+kHaE6eJhMaROdJwZVVkP+KWkDDGi3y92OLfBiUEI5yQtK3z4rXEQYw==","shasum":"f259f8d72e182c8939ba53273c784387fc8b3575","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.8dff8894.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSwCRA9TVsSAnZWagAAoiwP/jtsCsDVCkNLwu4CF/Es\nnj1A6W1SAvx4ZK7jjdg+y87MCZ6ngYt/sd1hQN3gBN8gdj4Tvxo5Zf4uAZMo\nISWz8edG+S6Py6omWSwT3T5gONR7p0GGMCScUCRJvPKBGqNlSUOGJ5wKCrkD\nNBWrP4L/HbxD3Art/tkGyy6uK9ZaAPMhyBVwGAiSkzOpGXLVUCGCf1zKMyWL\n7XQC5eRA/2wx1q1A6ItdcTZu8L7xBSVURcSuwgUbpHUQqn8O8iRgNvtw9DfO\n5BKNyTahimYJ6/AiPuG89iiqK3UY+yMx9drY1xSeT5hvoZ5YbdqXmjIom4y+\nyci5xMg5kb29JsDWpdEqEjSYE/Wnj4ZsfYwVt8JHGw3/0qEfdWdsTRGxmlU8\nWN+Z/Ih8lwc+7fs7O8OPAD2bPpkC5w7f0uuFXxt4riahOVrV0wGDxDSl3Ogt\nwY72V06Oq0fZkH5OCdsXctuyx4QrKODxYdqTF7kMHIw6+55svWP38hIPIIYj\nb8NcIBud3sWdeMCclfDoBqFBZ+3w2dsKduWfDeVN7wR4eBwrHkscrDa/iCdE\nQTO0fgfFzOojNz+OKmn3cf32BpGuovEV5v2ZXuuWJ07Ns+R23u7sj8wCpp3Z\nzii/7PrSzFwr5eZUWFPkI2TJwkRuIHctLryPji15bR5qF2mZAJdC4aCBbDoa\nj6R3\r\n=NElA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1aXeah1eqKXoS8HeBW5XEMsVZj/VHztZFGxBvNYPLuQIhANIoOS98UVWojAAd31JxqrwJIzUg2yFLPBsVJDvHvi5C"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.8dff8894.0_1631732912250_0.6198907557056272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.9cd7e927.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-circular-progress":"0.24.0-canary.9cd7e927.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nHbvyRsfZqgFmExYkIgtNbeReiIa0q1VgDkYVJ2yV1khmcKBsKFYsij6ecef5sG5pUmgfTGVunJ5P10xNwkicQ==","shasum":"2d825e28f2196e0ed344849a510949cb3a867aac","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.9cd7e927.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhJCRA9TVsSAnZWagAALZsQAKKisAczFp3esBmIMm/u\nT2w+SHhHiy03ARW3tDuSN2wc7y718WO6JsF4r2xR9/mVUI5mVrW2lpQNBJWx\niM9UUB2J+bo8WGBcdARmYsRKnG1bTVPNT/fZ52ipoybebU5tgtHTFqr0z36I\nk0PRCaapxiJSwtw7P3ZkP5Ori7VBF/nMFm4e3ZnwZc5QhXa3popaMb8n6W2x\ncSIn4/sJA/xe42ctyuOSVwxFD+XM0Ww2nxd24MDGoAK0rSJ0c0Bj07Ych5K1\n4KOxFeFfvEakz8FA9JaTYqM8DvVQEkhHGzyw0ueHf9HhTG7ykte1zrN++3mH\nzsqInZomgvUWhg+zRtjV9nJVhe0Vu3fYvptiBT66fjdZz+E1/pYNNxESv+JJ\n0iVXT+iA2nnZtWefiNCitDzvaR/Xcg4IixQ4QqL94Uw3Xv8vpooWtGc+OLTq\nhAVw56gUkt1dNSNLLOn5SXyMbdL5zuWYtJtzmJUF1fIKDgp5NgRD9X5zXNt+\nrmNyNuM01XmXt9fh2eEMZV5ObzdtSVu0xZ6Tr6BgNsAu50OIlW4fMKwMeKzY\nTylokzyAqbNmskZs7XQeoeZpeMNVv+q0EN3E/gi/PGv83qPIRRR3rMO/m5fp\nNsvCcmTxJxxicZdbVwi46WzdSsdKw0eO497AwDOMifLY6vv+UvtDl+YaHeuU\na4Bl\r\n=X5nK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJi9GVLFQiM1q6rh/ee1wsBFP9olbtItwsmWAwbgDtyAIgY4U+xrrB2Jpf94z7rTCWSL4y1H6Cwrx3Q5LjooL5/Dw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.9cd7e927.0_1631737929357_0.4678814600276413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.a7132082.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-circular-progress":"0.24.0-canary.a7132082.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q5Lo4oOS1wTch65OMDgoH5svh2NZnidOQ50t3pS/5IatNnoSS/vhWo4m4lnNaQwONmhzyHUlEvwMn90QqZYy9Q==","shasum":"fd8e8e4fc5221d56bfccb2ac36dabe0cc8d3a072","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.a7132082.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmDCRA9TVsSAnZWagAAXlMP/073+I3KQhc1mG/3KPFd\ns1EtCSejzKekT4Cu3ZSSGV+R3oiqQ6ekCwQxdvxgBk0SlRj7PjIUhgOeGo+4\nBbfGGblN5dXZeaGs0CWVsSgZHJjFcAya6Sd7nJfCSRbWQREQsn1nqXgzi6sl\nHJ14B1EUFEZAvUEz4gTzUrDfM+OFZFiCQ/j5pH6IZh3yKRydWCSA8ba/J3ux\nPaFJmKa6EH2MWexjuLHAPqAtLKlUbzGzlE2W6/ZLE5DqqyfZ8hR7hxsUD4xu\neHWiCE11pLKEpfpuNsNqE+ULIs58s7amOs09kLOiiE5+qgxI29YCZA3wDmQj\nNTROWpJblGBFVhMRjPg1NA1ZESCm6mI6gIoq03NmdQOgdGzv3qrQKSTTXm3x\nt9vYTKltk12gizPKwHbMYTmqGeCv91Rn77Hs/swiLFzNppYoc9gbAwANrMax\nPxXvCDJjdNKGTU9ejnD3gjPGuPZhboGlz8ZkrAdPxTchj4qKHGapPmdqENMi\nxFirmN9+cGgaqZ7lYZGQjGcB2ADJcvfu3u7esdXvrzjAyzyvlPWaifkX6BiQ\ntk3lkdCA327k5giwjWe+cLJwcrOMORJ0PEht5xFhBLMiFP/uRNmbX4/bVlwG\nn/v7nBjNB2EDhJyGKfxm5ZFxE7MW3+XrOAKxRvczC9eirhWe+V1qbKC45zk3\nYyDM\r\n=01tt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtdq76kIiyT/P9oi2tEexOFEzb+LsvNRSxRVnMHZkd0AIhALugDzTMc+kwCbm1mZU90oFTr+4Ya7//HycrkA5Cne5z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.a7132082.0_1631742338967_0.049948625704359095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.cd9110cd.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-circular-progress":"0.24.0-canary.cd9110cd.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4lGk0t8B85ge+fM8UE54w8e57BOF+H5Ln6MHWWM4ypB+s/TntDYIshY6JXuDG8IC4+DOvQ6yxB1Y9ZZHJfHcxw==","shasum":"5b85659109d04c3b0f9cdb8b66b40eedb531d803","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.cd9110cd.0.tgz","fileCount":16,"unpackedSize":38152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4K8CRA9TVsSAnZWagAApzMP/iy8v3i+yAyasnYJIcjQ\nCl8nqOSIxlag3lMZr1GyLNxDFWe3sxrVYgEZ/F0Tv+nXYaE3GVne8OQocYcJ\n/JxDA8/NzXKv+U2veuVgD8Jto0mSqHEKHzAR83SFkSihWrmIZkWD2DnLiRUx\n5m76IUlV3NltEClk124qE1dhVhq4wATW273+/tpPjGG2J74bF5oPU6nJ4UAI\nzQZ85DgMFA/PVE4LxzoOioP5Vp+QAjAO65QOhHFeqz88Lyfr1zANovmDV2Po\ndkhrQbiA5r2Vct4m06UHcKlRSwOGrb8ULmb4kpn06SAOx+/pukRfRGyT2kmD\nKpKpgQQY/TTmcbRRNSOsaQV0Jl7quCY5FKyMlWCXLsK8ofmF2P27BwDRa4ib\nlHW1Muxg2mU2mr0sdG376lljwmsOjFskSuFrI5UIfocxjYb7GDYSKulsEcBb\nEbHEBNcJ4PSLeiybul/Uob8FBTnxS5mBUbAUtl2I2ZBsB60DAOtZ62L1rb4n\ndUuAJA4C2tVnJ5pzINwGocHRtO30od6zW+npHKET3UcYvD/1Z6SUFVO7JkkN\nnlyem6nvEiWbmyPj9VUUi8h/wPJemggtDMB6eMyvHTBzRBcKDxL9jJW8SY4J\ntQtYPOeNsR/EEk63des6GBvKFZoKhO2ShQg8BfB8wEFc+ba5oSW+UwygGPy4\nRUsn\r\n=swbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAQE6V1tuSey03kB1EMLhxv32pRfHMbnYzcj2s6DYvgAiEAtWe54LpFhzN7I0vJ2TqTF/Hqc6uraJibWumFiAdp93s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.cd9110cd.0_1631814332240_0.598003034041253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.1e5a9883.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-circular-progress":"0.24.0-canary.1e5a9883.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-onIVeeyn5ssqMIdHU5kGFAxALJVpqd3VtbtUe80jJY+vVBiVFMShFIH3zYYZ79OzLgvLd5pDx0uQO8PvpwAkhA==","shasum":"e1cb2bca6bb79cabda38704ea83f56b1f3d47d0a","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.1e5a9883.0.tgz","fileCount":16,"unpackedSize":38152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfUhBR65ngc3GAspr1KEYYuzFB7pFrDGGv4C23q4AC5AiEAj4jEW4IdEYM4NN4clccbPzFUv8TCa42E9PtvuzB100o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.1e5a9883.0_1631911144170_0.11707265395126676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.32c830ee.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-circular-progress":"0.24.0-canary.32c830ee.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/ZPL0t2jLGX4fBzjO25id5aSSkVztogpjn/2J/hGxaxaZttfIYSINmBk13czTfcG7W3RBVf6qDgT+ziCayDNmw==","shasum":"7384a35e2ef9427c7779ff56b9775b092d977168","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.32c830ee.0.tgz","fileCount":16,"unpackedSize":38152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSvq0yV3ZhCd3cssBrcUt0nGSo9cbxCOEeRaNJecLvUAiEA0oq0NmIokEGeXIkY38dPmOW5w7evVPIk9L6MLUbOTlM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.32c830ee.0_1631920123238_0.8433036058250998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.1de87bb7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-circular-progress":"0.24.0-canary.1de87bb7.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0IwUW6NKJKCQMnQdgxF1q9Us0jgz9t2WiBeUmzg+9n8cdy/w1goWtobmPzx/ZhSgjyAWrAb6dyc0mISHvQva1g==","shasum":"8ae4c9e949162854599b615af1743e6d2ba7c5af","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.1de87bb7.0.tgz","fileCount":16,"unpackedSize":38152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl51KyT6Okd8BMtT27ZqZK2jnsHT4vqP9TOd0ty8FX5gIgYeBuSbLTdaho3S1d/1Mr7CyugV5XiouuTywMxz2sTK0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.1de87bb7.0_1631991126231_0.6793860402599292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-circular-progress":"0.24.0-canary.f2ea80c4.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-i4dm8m94VSHvPFxddglWVV20PIWI3pNWQtA3kVL0tYzl67G8lCIXo7fcF/ZY4bmxbncpLEAK3Cwo8gVIavCl7A==","shasum":"0066a4dc4bd28d16ad8e893c5ac7c93d5b045349","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.f2ea80c4.0.tgz","fileCount":16,"unpackedSize":38152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCICUuWN6Oy/MeHPuKA6OLH8RLN09lqIRoWdKN5z7jX3B6Ah8Uwmmg7u4+Yh9gE2fHfv/8AbwTlS8SmrbrHq6CLdy6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.f2ea80c4.0_1632160490995_0.014527973812849426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.569d739f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-circular-progress":"0.24.0-canary.569d739f.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-d0yg2o608su/9j04z0sXuCF0WM46gBVp9hV6U1UlXIXAizr4qYIPG+iaPjuuzYNyLRtOUEBNP1oRMFPLyX5JCg==","shasum":"5feb614fb02654f3908ed5c0407785b0c0d3832c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.569d739f.0.tgz","fileCount":16,"unpackedSize":38152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0cV4xExrBxEgiYRO1Zvp0qtopgKDhUHppUxoh5bQJBwIhAKf2sAv6kgT42lP0CbWb7Hpv4ogixGCjgk2Gql4XXYxB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.569d739f.0_1632173023842_0.3720035838601965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.24.0-canary.5a434a50.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-circular-progress":"0.24.0-canary.5a434a50.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-NFFMGU43sF+Kqnu2a9HD8J5TGOvU+4bE3SD/BAVSPJDglRGeJyG0UZ15Ty9zcWbbFRgA3InoPVitS8Swlcr7kA==","shasum":"516910c1e88dcf6c3d76407fcba3b6dd5fc1fece","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.24.0-canary.5a434a50.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJLKS9wguU8XSprWPNJm8VxvqQGwz5bUtnLgjwYTJ4CQIhAOfauZusx2EPnn4t7VII7W52TLf+prhQgPdFzn8UgbRK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.24.0-canary.5a434a50.0_1632189637125_0.618020166321716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.25.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.0","@material/mwc-circular-progress":"^0.25.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"6be1a13e29a0f18491948418d7076fdc1c7031a6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-9eZ+YDVknnoZ3aQl3I+AlQo1usvIfHZxYqfozjFD062MES1Uc6M0J7Kuk3Ywdm79AjyN5ixGLxeQq/yLQgSRrw==","shasum":"cd0bc98d24285dc898230858bc73f27574018e66","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.25.0.tgz","fileCount":19,"unpackedSize":51337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFf3oM4OXowDdwHPoby52r+vnRI/2i3qKYWqUzOL+f4uAiEA8LEdGmWt7jC6e19fEZ2++TE5q33yaFoU8Egddrs1pdk="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.25.0_1632192783449_0.9659054460476297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-circular-progress":"0.26.0-canary.b1c1ab52.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-eOpbDWjkLxrPhmdK9EeGTjBtVdXlZNTxebpaAL7bdh4rYk0D7ed+1BXFw32rDnS5xi1H/ciQEDpr+Sgkc8xKnA==","shasum":"32d6d89c7328d93965e25ff0c47bc298a5e52f9f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.b1c1ab52.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTYj90dCduziIE9Nq1EuAC0V5tW6rsSLnBun8ROspmDAiEArZap7AXMRhp7ic9RGm1fxg86/nxlKIzmQmaqGCamuEw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.b1c1ab52.0_1632193927532_0.02878493819422423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-circular-progress-four-color","version":"0.25.1","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/mwc-circular-progress":"^0.25.1","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-7sr8UDSkrpPqUceZsugFWaG2Gz4i/TbBNafhU77WcMUe/yOvTfvTy3dXZBdH+hxOF8eyD0jH3CgamRfK8enMPA==","shasum":"c579f23dfd894d96d4a57957b15aa87612a2b128","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.25.1.tgz","fileCount":19,"unpackedSize":51337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjwVHzY22Ic5tdsSpjQ2pWCK0Kco2wDxW9O/unKwmpVAIgAlBvLyp5oF99chgsh8eTDNp9xPIb2wfNOMdCI78HKD4="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.25.1_1632193962220_0.3574936769413679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.ae060177.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-circular-progress":"0.26.0-canary.ae060177.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Mnge4jKzoBBdi4SQsKLTqkpkz2vdPM+70Cdgl2LD8M3wVBzTvyoH942Mgidw2/k+8F9xAEh/YOvhiM31rUSwkw==","shasum":"15cad2cc78383abaa0125b90775bcc98b83fb7b0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.ae060177.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGV8WMUhZOnfhSIypPGS8pmvUZBcaj3Rir7VufVnho6WAiEA7gxR5fnYFywO273drdMA1x0SoKtpO71gmyiGMGmaFxk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.ae060177.0_1632235084080_0.1505569982314363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-circular-progress":"0.26.0-canary.b6fe2a12.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-nIRczst6HYOmz88hUjFHDmMKfpnau/4o29t0g3zExwLbEMv3njWNpcJxMkVD85IIINkfVPYT3F8NR9jT6bjLEw==","shasum":"02755c9601df96d67d5107c72bcc76f1cbff34e9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.b6fe2a12.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+m3qp6KJr962k4//f/AB+nvcnV2EGQq+TLgYwNhgdMAiEAiom3XBD/Ka0Bfgr8eqIRU4gh6joO3xL0aUytPin5FY4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.b6fe2a12.0_1632341773283_0.2954463464253545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.07e91417.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-circular-progress":"0.26.0-canary.07e91417.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-NGEMj5Ikv9mha3MtdC6JL289GiqTYUKjXtibOpkHE4vpel409ZpPGqWQjChQ5Doj5LSVunzRMZiwkPRnxraImA==","shasum":"5df6b9b811ac8e29e97e658233f711d0aef662fd","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.07e91417.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBDsywTUAex4FJmbWTfDZuEq4GPOfswudVKTvVnn+gXQIgDCh0DjSAHWnpyyw7ppLV5RSZv7O5vhT+kR3ND38GwcY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.07e91417.0_1632344742079_0.825066644133682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.e2203ffa.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-circular-progress":"0.26.0-canary.e2203ffa.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CuekoVGHIchyvB3BSrff9tnMlx9TlYRcYmSCXuPlDNedHNZ+BIbNG0Kdnxo9biOnuKPIiltAXAW9Uemn/46rww==","shasum":"e078601f2368c186b1e0afa41b4e92b59c1d6bf6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.e2203ffa.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo+WRi0KNzIwcEvabv24ftlaIkRzENh1Im+s8dxVEMqAIgbqJEv5xupn1+uhhkLmrL9et6U5bDQ4IvxwNNBzO4JXk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.e2203ffa.0_1632421652761_0.10705996861633471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.4abe237e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-circular-progress":"0.26.0-canary.4abe237e.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-nEDi+VnYnKfkLdoK1ft0tnDhGjahEYYhClVeXXz1WzMTwHzM81uYkGBRp3LBeG8at+5d4L5N0/mFi774iSibbA==","shasum":"8c3343419f05fc49055c72ebce88319d89a07d2e","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.4abe237e.0.tgz","fileCount":16,"unpackedSize":38148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgzmZhseqfzHsmdYR+mMKG7c8W1H1UAg1ru4IrWc65twIgQs1BIpCm3N3QS6uiGFXD5ktl7V3saX21W/RcGHXpjsY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.4abe237e.0_1632504664607_0.9681646876556598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.6278ee5d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-circular-progress":"0.26.0-canary.6278ee5d.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-wtJdK1PEnJUvO8etSrJFwi7vFV1pzHdhILW2ElsbQYOBsVF1kjfCk3atXXpvN03pQs7UkfnQlcnTc1NVIERiLg==","shasum":"6c6550385b220f9d550ab4e27cd9b82f8981d0c1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.6278ee5d.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYKNvi0V28ZMraWo9LpqNyCrBHb1ILyOgCTfZqFrRxmAiBnTLUd9WULlk0kMsTIiXShMm9+rTij+/TyRz4KvMPbIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.6278ee5d.0_1632767478924_0.5945201778473512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-circular-progress":"0.26.0-canary.3a5d5f34.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-iczerjvQTyVSPVpokMJ9a/V+stD2nasczpjVtwYsSjpVqzO/+xt52bCgOvPhr3YpYS/LzEaaBG64PIvYGyWdRw==","shasum":"d4b65ed06118922eeb93b132aeb106599153e7e6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.3a5d5f34.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2LciRaxWtOaSmGcm4g8OG+F+n9wC4NR18QlVjxUXZsAiBW0IF5YaFvAb52yU9UzQ8yolr9qwr+TAzTMbNQZhWPDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.3a5d5f34.0_1632782487751_0.30400405811042464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.143ed3c8.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-circular-progress":"0.26.0-canary.143ed3c8.0","@material/theme":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FOh3aFFE5qcDrw1OsnmdLmcD6ZIxAS5yE5r3muaeeMU+okpRff4B4rdnVspg1lEQ1lxvVZkCz7EXghcV9bkqOA==","shasum":"c79b905630a420d09be5164e437e2fe747bacb2b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.143ed3c8.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKpOqKKtaC6JR0nbqPAvh7Lg8Z216YVA1W6GEJYVTIhgIgEIMD0TFrmDpMDNOVmVkGbIvbz3tIBCrITK8gX+MXFPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.143ed3c8.0_1632880247402_0.5118149607512092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.e5923d68.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-circular-progress":"0.26.0-canary.e5923d68.0","@material/theme":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-VzPCtheffcavP+5m6MEgpHQGGKVkHu9b/vzrXiee2Fd3UGHLxHYBVSYa3N08fRBwqBp7JiXChC4MHk4EHoYe+A==","shasum":"8d2136316e0e82cfcdfb004d6beca7017a86b66d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.e5923d68.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuX2o+Lgt3cUPG4FtdwnN8ByUlk7dMfvYF/fUdXm2WTQIhAIGEpGbbGpoKYYT05y9yi9b31jiMlEWTYvlGrROtefVw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.e5923d68.0_1632960346066_0.5729823495137658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.d8ed5109.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-circular-progress":"0.26.0-canary.d8ed5109.0","@material/theme":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-bm39D5tKm3h9uZaahiL89vpsaG2BuT1l0oGfRv5/jjKrGWx90M/k+HrT1f54RqZgfTmx2Sf3vn+lP3Zx5E2rUg==","shasum":"a6d94abcb3015f98b5727f6403e468044b378673","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.d8ed5109.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3w4ICLk5NfqPH6TzYXf9kETQEHbJ8a6lds2AGcwcgWAiAHJccbor/lFPTR9PcSCYh4VC9X2A3tDC9erbywcJ9b0w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.d8ed5109.0_1633044829686_0.6566417882907356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-circular-progress":"0.26.0-canary.0efb9c2c.0","@material/theme":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-kWMEYCZuKN7bOFqXCCyjac07jw+xMMJ1tQ44V6g2AaK2yUdPjZD/RpQyGW79U2C6uW1wmhBCvqYfzEJFAE3juA==","shasum":"11451db07e8cbc7f74565a0f2bc25ae3990e3f45","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.0efb9c2c.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/ZDLNxjl8BTHRcgQR2EaYj+RJ64bLBn2VAHRveSATgAiAn66d0Qphwoad+6LV5cX/W3v62iwrfYlJuuGiU92IiLA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.0efb9c2c.0_1633140493304_0.9529708553406346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-circular-progress":"0.26.0-canary.1c9adcb3.0","@material/theme":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-LtOaqG+xRDMALRoGbdPGihGTaFzFkfoTYdluMekrp21/ddmsIS1M020rMWzXEEySbIu8igyHKzi2W6FF9mj2Kg==","shasum":"d912ddad7051b804155c88e32e2df569652b8340","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.1c9adcb3.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAkiElhxj5w8GP785X0XAGgvEjVKze0t+gosSQLdQPmAIhAP6NIDnAYyu9kD2V7yoR6ibX+pdNA2FT/Kicj0iIDKTM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.1c9adcb3.0_1633368810518_0.23257982330815552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.dfc00d60.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-circular-progress":"0.26.0-canary.dfc00d60.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Fr1QArrGSMTHgM+WZD+SKf5zPZr35osomolcO5G2/iHc+FTPXcJOTyCneogpEzxE3C94b40MBhqFwlkd+spBiA==","shasum":"372d4792e24057c270237b8cf8710d72971fe8d0","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.dfc00d60.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGd7UQkUE9G8DY7f6Hvz5gNrHSpFnDi/gMza9WY9M77/AiAXdbjlPKfKUd3BoKQB7jWgXcGgwHlhP84UspRsgAcXlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.dfc00d60.0_1633741031754_0.8208226047221729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.c3aa844c.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-circular-progress":"0.26.0-canary.c3aa844c.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-O2I0C2r+NkLXAnP98SupW4JWltyWj/zMIHKZA2IUu6cMqtqqLDAAGmdpAgyn3/B/4cRFpqoC++Uy98OYHCDYXg==","shasum":"55fcdb85d8a92ce3640e60c275d7472fab6a2556","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.c3aa844c.0.tgz","fileCount":16,"unpackedSize":38122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxAECpQilAyd6hBP34+AvOtlg3/dcfmYc1oZtAyPS0DQIhAMc4uWzodoGXIikCzX+Gw3k/66i6FKabniOIrSGawUe3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.c3aa844c.0_1633994058358_0.151334195976766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-circular-progress-four-color","version":"0.25.2","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/mwc-circular-progress":"^0.25.2","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-MoR8xAX/7JfBWxrGKh9yYsDXCW6kulf7DUjH+T6YAZHdlxWY3UOmarV0NTt3XDOmkOHUNsR/PMk0YkAaZXVZNA==","shasum":"443a6fcf8178aba215b1a0f9b753f31226d07d7c","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.25.2.tgz","fileCount":16,"unpackedSize":38070,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7zrnn3eO5bzqS7HqIweV9LZ/mwaJiDWGMeB74ma5V4AiEAt5jJgNks8bHNTDKx4GcB5KIeerttFO7U6R7iFRGT/nY="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.25.2_1633994312246_0.6082616517425021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.406d6fe1.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-circular-progress":"0.26.0-canary.406d6fe1.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-86s/wbtciwuTfrYZNMPYB+L78wD+QnAI/7nsHsaYCkdDjS3a+Y5yFiITgvSI/Dhkyblw7WW90cqX3slRLvqRKA==","shasum":"573e0eebb32bda2f1b048797f48d30536e8fbc87","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.406d6fe1.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6pIGqEOC93+Hhxyr9gr6QM+mDOtUBVL9Hr+Fpyzg7VAiB6u0+egeygn978lEvMR76nXApiVRgVLY4R1tVFBOijpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.406d6fe1.0_1634158765329_0.6458185692104845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.ca0a674f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-circular-progress":"0.26.0-canary.ca0a674f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-s/pgI8Z4AhUcOwRIQ6Gw/zRBEU8C/XGiHToHqcesxFRyT7kUcyALFbUIFeG6sJ1tn8Qfkd6RRFQB1srwQD5VAw==","shasum":"85085f102b584ffd3893d39be0bef5e73d438f99","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.ca0a674f.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5NHffYqOCy375XDcQu8s4oalePfNgPJVO2YWsOjtnyAiEA3pcGx4+oqH9JBrBmSOdRh7dQVGoWS8JigQRniQjDudY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.ca0a674f.0_1634593012939_0.036635546102934846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.eefcf660.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-circular-progress":"0.26.0-canary.eefcf660.0","@material/theme":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-J3l/g/ma43goXziNqiJyVywen3tTs5YyvYHB8gleqhWMKQkXsWTJNam6hMvYjmnCZHy8n+MMkwvHaqqT4oCVMQ==","shasum":"7b6940a6657f0f6f8084651ff840641045b43278","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.eefcf660.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYJuHwot+u9wN1wM98eq37BikZqlaMFeI1vlosZUrQsgIgauCkJsfxytZR6XYCAldRI4REkw3NWhWu8relIrhJF4w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.eefcf660.0_1634765013702_0.6635134131472418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.d21acc8f.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-circular-progress":"0.26.0-canary.d21acc8f.0","@material/theme":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-I56zbM+UBGAbC6gA7NzIFo3vzX83LzfyxvCBEF+bR5QBB4Zqdl8NdegMcDczqWcpPrHWLpx/PdGmaSBHgOlRdA==","shasum":"b307c4cb7ccde3f3688c02751150d615af5bb7a9","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.d21acc8f.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8GQPeZH2t17Aq6ajgk69qQDRlXU5vmHrIA7rMpirUOQIhAI8nw2ALuhOBZV7j7DLmmFAn8FKHvqIAf9s2p37FX1+d"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.d21acc8f.0_1634769146334_0.5270123347695701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-circular-progress-four-color","version":"0.25.3","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/mwc-circular-progress":"^0.25.3","@material/theme":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-CEpZxvZnJaBJaBD/WeffbbQ1vWaqML0zmohVIebxfml9MIukzIT8nRFfBmWq89zlszJBhdH0mfDvk7jX47z0Vg==","shasum":"46fdd0052fa063a72f66ccfbb9ca601f0dc5ec5d","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.25.3.tgz","fileCount":16,"unpackedSize":38046,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0egE4vqRrR/zBGAoiYiFLr7vuccJIibV1d89k3954SgIhAO8guym/UTai+n+yElSP8SNyQliUUym+Cu08E8Y/d1IQ"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.25.3_1634838944187_0.20162650204437615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.60449b7b.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-circular-progress":"0.26.0-canary.60449b7b.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Rm7ba8Gp6TB972Oifdf8Im9mw+BeDhHBF6n6DYF5jpGqZK667zzhMQh+3r0sYFsoVzVezkyPbQvL7loNA3EwMw==","shasum":"58daf06ea7111a40c86beaae53ccac72cd3750f8","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.60449b7b.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFcLlMot4Jz+XEhVolEHMiGCp/5lPo4GQDCkS+mYeNzAiA3Xh+sQWMinvlq3fBxun3Im1EUKtwx7pgSgisnW8COJw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.60449b7b.0_1634840242357_0.7382209851716719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.0d8084ed.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-circular-progress":"0.26.0-canary.0d8084ed.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KcwNow8o9HMtCa9pTr2ztg2gF0dc6WGG01TrxG4ZJPJ7vI21XleaUHkl4gXozqHwRQjO7g/zRITBFW2Bo8w+vA==","shasum":"f237afa019a8ffe7e27683efdf1803f0d76adce5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.0d8084ed.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZSBCbrFv3YOhLg01HtNP+kKaLZyo2tzVHkL7/ZhtfhQIgdlkhWPFpuxNifFwXBik36a9le02PfJ/HJmJm6VWcwGk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.0d8084ed.0_1635443091578_0.8944836183782596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.232327ee.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-circular-progress":"0.26.0-canary.232327ee.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-NRkrE10AWOtE0+SMC+9tMW+pYRmJv3IzP3OoYWiwzJ2LrjDsAaa/4gy+NKGWuvQj6ANpJQc8j+U5F6Hq1ohr8g==","shasum":"70b427f65b378f47d02000a448c37fa583933208","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.232327ee.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUBdCi3HJul0HUAnvDibLSwx5uV3GwvpB6qVPTjBjlaAiEAp/3Puuznap/81qWXwnAt5FomOxm9C/kmW1KAklab/ew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.232327ee.0_1635797742401_0.09690463840293484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.0a492ae8.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-circular-progress":"0.26.0-canary.0a492ae8.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-hJzi5Y9wzTFyoBjVa36s0l8aasbKIShqTDRZ3kJ6l5NyvURTQV39pWGCId0D5qFJS4+ozTrDylnPk4IdbLQHZg==","shasum":"5ecd85235ef0ce972806bd6b46071f4fe9df5406","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.0a492ae8.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0nEoWj3Oks/EJnaIlXv6lvQLc3ZGN7caxnSocTopMQgIhALtCADRRMQRKJIi3Wu7Oq6p0cqNsLIxRQ9hTDEhlDzvM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.0a492ae8.0_1635847221804_0.33807077454495094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.0aa18745.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-circular-progress":"0.26.0-canary.0aa18745.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-GaT7lxTGOueFpfnnTCmAbpv05QKYi4xQrsdEzqMNfl/Za+Udx43Yb1ygqUXrmFl8GbQh6fsLnaYxxyZdwZyZzw==","shasum":"ae8a222526b99d1f1e8ac2486a19abd3453f8d1f","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.0aa18745.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUwLDaJ2cR0jFJ0Vzhj43o6m5c/DmIMvZiHpCPUtLQzgIgMYkB4Q5vDBehpUu496Jq2YSqpa7AB7YISXO4X0qYxzU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.0aa18745.0_1635876467870_0.16786236254914377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.f3e28323.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-circular-progress":"0.26.0-canary.f3e28323.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-+3PJ8WY4UUx4HDgepy7lfD31RV3pecyL5uQkyKm7y8c+NAA64C3WzPCLdgxr7hmUNK5jBs1Qtz32DJkZNIr5aA==","shasum":"49e17e3e123d829c39aab6f9db099aa2d14933f5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.f3e28323.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwW2Q5UVrg6acNjUZC8DZBelH4Q2cHDoqhv2vWXe0bcAiA2WibRLBnI/+oYAR81+CHrOxADmAEqfgVrvEge9yzdtQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.f3e28323.0_1635879570038_0.6007644311683702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.27e05c5d.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-circular-progress":"0.26.0-canary.27e05c5d.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yI2QfWGHlDa5Kk+7OxEW85Gwu7vYJtUG8hnSSlYB1FGgW8wYFJQflPYtkiLM++s7sqKp82ynlOaQ4sPMAuHTLQ==","shasum":"c8245d1f1d3e6241f38ca52cc58a2d8fee214db3","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.27e05c5d.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGoNpCaZruX0EJrI/VgjvPz3RjQi3MFu6AGhDpU3jPvBAiEAl5kqBKireCHKviu+H89K6u540xqrcoOimENMVquDnGM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.27e05c5d.0_1635965095740_0.7468345797562563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.b9e44af7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-circular-progress":"0.26.0-canary.b9e44af7.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3cPyozIdhdXTvmCOjnQYy4XMqpUoy5xE86XQvjzlTf5GnztmkdnwfgaZVd7a6SuDYf2cBNwWTpHy7Uq3wU6y5g==","shasum":"4566f233f0118780b9c3cb27e59599d85f7fb911","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.b9e44af7.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQUbJf+3mu8B6x61biiqcYZWKJfc3VqjBDvuR3ffsDmAiEA+CFeJA4rFShH2ytb8U0apusSBwFy/KyiYMMrAnIjQFI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.b9e44af7.0_1635966238503_0.9091277743581536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.448f6cb9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-circular-progress":"0.26.0-canary.448f6cb9.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-BKOsVEP1gXETEt0mi5vLNIcDtbTwtiCCWuHFhLnwU0kZuG7q5yGpdbBY2IAAeAWFblZA81Q1QbWo8ScIKXxN2Q==","shasum":"be240819d7ebbf89727edb6d835220e3895b3160","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.448f6cb9.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICk75gjsD9r1x4xzG/OrXe94EveGRt5QcJDMtAZMJWv4AiBHJdc4WioP3S6eQFXgcfa9Om/nAHZoRVjPBcWlx88o7g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.448f6cb9.0_1636049271502_0.8671362752906768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.8067ce28.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-circular-progress":"0.26.0-canary.8067ce28.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-kYt5M/GlAN/v5oSOyy+Fo+ZlKtOfo0hC4+XyXSEs8GKzQCjwVwvAd5E/6JO1iFQEJbh6FfLKNWWmYhNkDFwPIQ==","shasum":"b9c1279345217c8cd9ef72984bcd21d385af46fb","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.8067ce28.0.tgz","fileCount":16,"unpackedSize":38098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRxeUfllCzXWjwyTJmuGlpmGQU7g9LlywYHwoA2Kyw6AiAOWSS/lysPvJ2PYIbmQnxQpmPb2Vubc/WLyEoKR9hG4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.8067ce28.0_1636064543903_0.07308895868026433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.345c2bb9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-circular-progress":"0.26.0-canary.345c2bb9.0","@material/theme":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-qmAwYQ5wsGTYOTBYXzNehwfQVD7SbNH5pmKY1miDSAz3hZQEMNJBPnDBMXUvh+gfmhCydMpgZW1c++k70jvtXg==","shasum":"2dd66f2eb021cd0541900d41bed9add128ee897b","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.345c2bb9.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3qCRA9TVsSAnZWagAAjd4QAIy45ie4DkfJRWnMrYHu\nlijaTZ30BzwCmZKk5lARkxFu6e6Bra48mG/O1s484sANNcPSrVmRyC91zC67\nqE5xmYOnGw7TtA8wmvMhK9hmFtB/htsVnMG8/PZXqNu1Uii8RJl4oX63wwYp\nU0S4qQ/PXoRwMr4Yf1FOtkp5OyOIH3v60feRJeAChW1WsFtl5bl50I3p97Fn\n+t4v9RSKDC8gTIoTc0gV58OZiJ35qfX1Nui0DiialvrSw++23wtdlfDnEPoI\nysDpWrOpUig+y8TPdWmcgl4tkvjDdC4Ey26wPOHio3qLqnd0sAeVqquJ9V66\nuyztyT+0qmJRoumhNaNE8ymSOzqEUsaKOEDmNy38QLSZ5kup7MoA+eCkd+X7\nenlWGq1cwj1yutBOrHq+7V5hhg2Hxpc/WwJb8jbFO9Gy29+fq0hezKatYIwL\njJ1k5aF1y+O1T5eI5Sn5sgrcsz8iid4OcXRs4gIzRZSirgCAFfEoOGSz8gMb\nW9dRhXiLs9Ny912ZjdfJY+NMIRBLmCTsq/dxJC0PYTRtSvBEs8LTb+9MG87L\n/aVD162g1ugJQslLBKPmLKpkiIOTTxfiKy7I/ltOaSpR/+AzeeFl9GeiioZ1\nK6MYJMd6kTCyapxGfA02nkWKeMCsqqRQi14ADw8aKOdSqD41dpj0DnkwVHuP\npktp\r\n=o57x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGR9ih5FvT/kQpe7H9rm5KbRcouFT6bsnOay8wUhtAukAiATsx5+g+9lkOdxctrNHIc2bs3QNEcLHRxyjQfMqiOqjw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.345c2bb9.0_1638465002826_0.5964851493003198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.0547aeeb.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-circular-progress":"0.26.0-canary.0547aeeb.0","@material/theme":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-m5vwrKW4nnz0PRkdmCyd7Si9xqxdtHbkajQqWeLFiOYWms+lbBHDAztBt88NAlOnZwWSKrJU+3ZhjHVVcWsEhg==","shasum":"68b76e0e91b2e67187b6ecffa8a740ff06924d68","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.0547aeeb.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjvwCRA9TVsSAnZWagAADD8P/AtgV5hScg2BQfJnVshJ\nIK//pge0v0BNn2rVRzfFf1KTfBaNWsUs3+TZxF2FGIT9GdApD0M4kwim04Jl\nn/5LwTxsJpYF6ZZpqIbqdzrFbZsK9tURWkCtt0BSP8Ks1pbZvmB3BJaKAo83\nS/0MS9+3vd0nlnHyF2HiJNnZBdZ7THXd1vbBqdWT1ipMzR5EOzJMhyoL0vKt\nWXYPPVW/5Z3vDvp+jVgguvHiJIC0MdMIqyZmz8N2HVwg83UoRHrABJ1ufOJq\nsTtLd+sY5xCikDhDG/qS3IhzvdMTEERFp7olssqLZg0pDuvMiJk+XZ3MzBTD\nOjxhLRiMMgqRBzCzBJpUnoOTyx9uL4VLFC5FwE/1R6ldB2GtNvo3wUrWrhod\n4kld2KRI+mxjY8y/01ggmegBzYZvlNCUykOWkEKaucHEu/NolwueiGN2HoIy\n/UvzSDLds3XiAXJGeuE+kqp0iMQW1fAyUUymTjfktImxALu8TBiqxFG8Wsgr\nSh6kiTfZPU9ELU/Y2PPmNRosfsNFb5cpn+p/Wh49vjAHuCFVZPsWzcTAAkA8\nYGMwp4vRl+spQxO5DKUXz1xKi778eLZrkND/PpvOltHFX35l1mkM8lvbMhjk\nUj1OJxcAUxlfV0IF8g9xO4JYGlmBhJJEiwCs/cU4QHbu2DrtGfeNxG+Pl5rU\nNHcT\r\n=lGbF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAU2I6v3U3pgOMvWT6RmXvhKWQXkXryvd37PHeODZUjQAiEAsfT9ez/VM105p2uB/HlFMEsCf7bZAg0RrmPiEjoYlks="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.0547aeeb.0_1638808560583_0.2015809275451772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.3b2452cc.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-circular-progress":"0.26.0-canary.3b2452cc.0","@material/theme":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-wH55GJGNbqSpKmdSZTateAYmCPFiUVcpIlWSklKPRzYt0uld+o7pQ3ajYlRcMAi6VbsOuHjs0ECpr9fxYO9wcQ==","shasum":"34f58b1423f44dfd013edfc2d3b38c304e65c9f6","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.3b2452cc.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhOCRA9TVsSAnZWagAAxUUP/3PS4bvwm6n1Vlmg2UnQ\ngtiysAboTZxEYAvHMomd8EAi/f32YHQLjJk4J2Yhmt2YdLYsGjgHU0AvztrE\n50w1WdSDzvJxqsjmr6uL0MHJeDJT7Lsu5Tv0cQ1+SQUQa1Je6e18g0oIJcch\n9srlfcnnT7c0wvBHLOf/6d5m6izqImzWZ3XhcWLbLfCfFR4UeicHOQf/Pp1w\npj60ZtChj56Rv+Rm9cO0t8ye/6t9+XUBpiXfOOEvlnaaBT4kQAuyDfuMzxbg\niY/1uDiAonDH8m0XDY5v6nLbqlPyZEUU3DUII4ts1leK2C1QsuAQ9EzZCPpZ\nv4+SD7Vgyv/G9Ts9VupUv3H9609tg3ok90fFWGdDFhdayELY1NgnHTuvnNk/\n8YIwXEVq9GfZ6Tf8NIZQFcnFc/mIteCgN3LFEIl4ngJ6AvM8KIMf12iCF410\n7DD2k+L0R29Erv+5qBq4wfD+PGKRhqb6gbPUDZ+FMYe0dVS/wE6VwVn1C9RZ\nHtS0PHH3MLyU+0K5DERyQom1ZOVa/OIvnMGJhbrDrj4JRWoP/zGJ0uJ/KjDH\noPShGXsCwObKBsp9nncF8oNgjhAcJhE7wm/MTjrpxpOGGxYa1YzPpjTU+226\nh50PExdowvUW1K2h721+ef4oUxvg/lM7f+2/0KQB0xeeza0hEBDEGd05rW1l\nJ9Hv\r\n=RMs0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdf9lplYE27lBJe8yDX6jszZGEqvRGxPaTor5f9GwalAiEAoN8SldFpS65rEiyEblGt2PQI5H0T+4v//yhwsLQcptE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.3b2452cc.0_1639008334632_0.13075660127803945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-circular-progress":"0.26.0-canary.cf7ba5a9.0","@material/theme":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-XdULrToglQe+uUV0coKcFqb9jscEs3I/JoTcNow9eAEYosAe82wn7IYD5V/wg9AVOUTpZ/CfF8HpCpRRFk9p7w==","shasum":"9250f0109b0d24476c9e36b17439b159d34d9f09","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VNCRA9TVsSAnZWagAAMXUQAJVSQOXagIZXMUuHOjK/\nuih6y6B7biRJ3SE7+tmnDUXwpx/iL8EnVh2o1gsY6JMtshBs7LRT0cPpCY4J\nmMLHAjPk1O6t0ErawobrI4wDlll9nvrNk9ITUQ2215GCrPzbuqT/X5SChoR9\nyqo+ZYBMSOcaCVYOtEtoTENU0KU1L11U/J0XjMH2lVLhQ/lCohc8KQRiY+Ki\nX1Jw+8mTNNMpXOvuPXd3GIHvYUrx+yVdHkIni+m85Mo7QH2gK2Ds1SIKgD3w\nfhZpdgt/GI5Hg/G3Y9soM1g1jNFhV4au0VeYH5wN6ZQ830i3MbFLehZNjVta\nB/eFOQh617ePI6V2lz+YG1wxKeg9udyRHVkQDeQVxr3+zoawHrKSmS3QAwgp\nDaNK92njkk2m/0BQ9cc79S0r1iN0dkF1C1OpeMDKR1Cb5PKxgnHds1AqRwnx\n2YzcZYb09B5IaznBpNhpeE4gyU3XNboNHawqeiBEYeiMqPCbj79+uaNoMSk0\nZrhZ2WpbDFgZ/LyxAFgJZ7Ri6/uzHmcl28vOp2TiTNF6wJwIR+zP/wLktN8H\nOtm0x1sz/r/l/UTIOfWBfDNdHNOBD6GssA7bzTENlbULrhmx4RbspT97ZGm+\nkkngCwaR5ACaddKLCd2OxNGWROxg0K1Bs2/pW6YlI4rNQZo+hAZnY3nBC06l\ncLB3\r\n=9TIc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTC2U8xGW+Igdlso2iwuoI9YvNClkkhVIivSOCn5Pv4QIgCUdaYWTfVCRBzhnciql9IV+2M3VzRdhXT5136Ck54RE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.cf7ba5a9.0_1639163213007_0.4185373510447936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-circular-progress":"0.26.0-canary.e1bcf14e.0","@material/theme":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-UR+yLfa/gqjbio+k8w8NubeY0a+b8g8wAH1nETszbASDD510zwoCLMcUNUDyrdMxxpwSfUa/m2I/rWyZ8TE/cQ==","shasum":"f0b16539e8d3c7e8fb16699fc37181c75e60fa60","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.e1bcf14e.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3drCRA9TVsSAnZWagAAsD8P/jsyuin+8wMq80QQzeYv\nPe7nLoqVerl/PsZur/vJVT1kjq4fsJ3aKvVDLVp1o5C9bAcKQMh4UMeHpeM5\nxLjf81aiq3c9gfx12XNLAs2qudYKpS2gqex4WkwSasHw+O55uRMKwAFn19AA\nb/xF20kVLJ9d77YmWKI0LlK21EhkUcD0KTdCeWkBa87qy9Uj47CSd/UoKpFM\nUkQnidkemPWMGucBUSBE//nmvL9nEG4oUGHzV2HppIk2uDjtEnva8dvwjFe+\nKi5WbdjYUUApumewRYVCWmE6y/vIxakjaD0ZvHRbhb5f4VsZHSzpi4RR9tl0\n4zkHTY8WdZZ4/2ep45KauPWH3U6+g2W+CDb2T67mDl+r9FStMhmCY2qrCDb8\nY8r1P+cdUGbNoXi3j/R5+JiQ5d19iZ50qM7mA5wxafgX2QHNnYWX+Xfmuhjs\nxNDg9K+IT6LqRb9zjkhEwJC5EN8q87QGbrRa7k+frtss2mxEeyw8ost5zWv8\n6tRvharK2LBOD2tZ6v3Pcl9ifGK8mJRh+0c+vKwWkbaII05DDsfCXVqhOnNf\n2gyLkC3rrFpQG8MZPblNqCpw9KPlRQVR49ZhiQldXcGPyJg1RxXgXsI3Kmll\n9KiAAM7xfn46ebV6bL6ndMIyY+UyLBkG2t6dE5gM3NqCLn9SntVNXFVsnHz8\n+j8U\r\n=BGNq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1MEoNj/CZqxt7BTPjwRe8hJgzpGXZPqDcM5zJ/Fr/EAiEAh9kF2jfWOFWe+H9ZxaKSvYAK5LBwHel6NJWDHZAe9+M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.e1bcf14e.0_1640724331535_0.4474153523886031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.b9d35b69.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-circular-progress":"0.26.0-canary.b9d35b69.0","@material/theme":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-LA3GrDzVv5dxYIRzv/q3WScG4GaLnLlospc69II7orbjNcdL5l4O2YgfDYSJd/2sPzD9R9ANyeTLidWtBqOUnw==","shasum":"1108e65618fffc5c17baf6ecf992693b153f5ade","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.b9d35b69.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLqCRA9TVsSAnZWagAAAj0QAIXjqmE5gIYfaUXl8CTp\nEnt34ywv73VQS0hjnBYIHffqiQGp1FllQ4llqWdOhZqvtQ/Jys/tTszjRHAb\nDDDUy4mQkK2Rr8cqKQajv1ctjYWLTxpOLvpxVyX5heajlCXH66hCVdF29WiH\n7Z71VRRF3YkOUNHIpyRzvwNE5LrStc9Fh4bGjizLBYmEOyC5Xd683KtQZY8Y\n3dQkOAW8hRKDa4X6+BfYLxsOD5I2SX9Ocl23oYYfVTK4jsyTMKQ+7CXVZn8S\nSlNkDtgcXYv2v48BllnBSE3Dz+jKZEcyU8WpWXLx4JOyigSuyDD0KIWTGDua\nbRA/u34rlQimqTa8Gaw42krIIM5gI7bJS4smFXi3Hh9Vd5bWViES2aYsW0uI\nXHcv3Fs2sXPXq1igTPnWS8ZcWnBmMbFm4XRTyzw73aNvXI6AbLKeZpYv02HQ\n5sU8GQmdeicOsKzWDFB1GGZyIHz9U4XiJjh6mYBgPiL3qDdJ//OOXQ6aKDzZ\n4OgJDL24ZBcvzfMLq8EoS2qUZOJ9EWfnbPI0vdNMoHUxbYDiQMDRKhag/l17\nFP1xLe7ZQa6QSm3szE/Pt/vNA3WT0mjHPnBx1BHjz3WiGbSSc121fG2EGjnr\nKsVsDTk4HtrGKM2hu40fBBL8uooDdx6MnsZnSjb4SezQyZPZyGg/c9PPjO4f\nWgnd\r\n=h33N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKBHwoHFD95JR9iuiGHBucAnDDECK4bnz1nkqjuuR9oAiEA4tAabawUXLZ0zZoUidZ1/46KjzNtT6DyWUl+3GHffbM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.b9d35b69.0_1641407210437_0.04606563899158678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.2afff08e.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-circular-progress":"0.26.0-canary.2afff08e.0","@material/theme":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-V9IRuel/VdSjaRgqIW5TcExaClInv4EaLHzKDVHu6HbaWfr/5vKGCegF1itTaWQL11PicSNJj4x3BF2Po3VktA==","shasum":"dbb0ce8b9d4f36f82e90dc46565b2ce9f08f1d94","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.2afff08e.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12u5CRA9TVsSAnZWagAAxLMQAIYi4k65R5cUrONvUolQ\nyhT9W2kss0G/azSrGKj+t3HE9SgKOq7GlQBLmOR2VQDzRTmv9gfePQ1swVAR\nDVYZ+5kdICsLVf4A/zTPGLtlQW76ww0gPoUrWy9pQNJDvy3IeECqjS0OicX0\nffKQaXhhTg8pVyftBhuicXbwK92C+IdKteu59e3mOySB4OeKGtCLitIk4Nba\nybgmfvNNpXKLMx0h/WHiaSN86k8ez5pWGCcg5svtKdxE2PHYwTBJdSr9Fnau\n26npDeiSRWU1zg5sZpH40mSZOJP6aYmwqdds/21N6WWT+RGwRgBGHpWMQy6V\nYLHpIFQUIbLfdBa4iNsn/V66s9BuOR3SanoVR8DTahGmpOsZhhWM/2OrPEz3\nLfGQq2yGPrWiRSRrmRrlOQb7QpKB1Y5zIAHQlj6oV8e17mmZlfb0bKhnHtCd\nqjjaEBr7WAou4Zq9Xhnscp+omXQ+CYlwjIF0TIyOSmJw3O5OI4eNPO/jlq82\nT5zdCK58AeAn7AfPpLI/8KCxkffj3y4+wHcWyYpBcxVhaQZ2dxshz26rjWRp\ntUcZ1v7m6C5mK9K6zcvyVFsRcQLev0Gf4R1DwwtQpztw6QVLBmVHjgNKoExS\nHGX50y4BiQYhQiI+7E51VMli4/+V0pQOkiuIycY6NlMctvwqe4lslO0r6pmb\ncBqa\r\n=49nC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJkpy+z/l5MdY8PLoHRRq9bfMs3li0i/LJMxDvwjpDyAiBPdFxOur4u7PHs2mKySQFzZfUi8kDE5wgwzF0WRTFkfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.2afff08e.0_1641507768834_0.2078375374216812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.893fc857.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-circular-progress":"0.26.0-canary.893fc857.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-eNsTr0kWWgNMGNF/vPqzdXfr79vtOtsp6Y5nZClUiJos+7jO7cBl5kaTjtclQz0sb5xnTK59ZGXvrtCxe7mS2Q==","shasum":"2cba920ace85af5b8be2252d27f79ad4fcbd2dfa","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.893fc857.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2Iw1CRA9TVsSAnZWagAA0AMP/2bwMKsqYPBVUORFPnzg\nai4W29FK2J5lejqo2TYNUvWrY6q+q2yII/U63mBITL7fHvXOsSe9Cm9yLw83\n6EFGqCwcOoDm7YjFjEeVhD8fbUNMRA6n+6w4PUebJzi+8+q8sGuEdybculZZ\n1H0r9wg6W/RGQ/VnsEgqEyTB9b8h5PoxmWF99HX0KgkH07rUkebT4BJJqSq0\nL2iiRQE52W90xxa5sZdmoDvnuWgoPnmlhgpqE/Lr4kfOjf2nN7cDtrMysMGS\nHMg4SQpoUpfnZfgOQ6eIEeW8BCbW5df6/H0RLKeyimM6pM5G91Vw6KTNkwBS\nj/StmEr6QPfThtiFh45ADrbnnjc3pYJ8Bdgx5jXVoVP+brke4wxX7Y7Tlg/a\n3ReKc9/rpF11w4Ha1RQnKsLaD58iB6oIBGj4DRdAm/iQ+3a2FDH+D9ZR1VC3\nljct8NhHy4sCXoifY03Stvz5tHoNMraP05ppZy35k40vh8rNa3HUkuSm5gJc\nLXIHNfaOeZhEHmBrhkdxTVob0pgLWh+vWBhFvjzkHPHEgCOw5oBzwu48e+zJ\nd4ZWpthRClYjFs95DMh8Ej2N+5qjqO3htwAdOK32IbnYGosKfmjhsShf0ROX\nPE3gRBCwQ7T81tZN7OYHpWjdg0uUsbMUEo3BWWqCY2iVQrGUTgu6Kl7QLL2B\nKPFh\r\n=iu8P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPdpHXnvY/spzw8gsWOQmWdL0JjG9UPjL9NQoAYdWjlAiALt0V6nDbDFnhPUCmi0HedaSJGqcNXC1Ac6Egns+ne5g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.893fc857.0_1641581621534_0.8426824763607152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.69ba13b7.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-circular-progress":"0.26.0-canary.69ba13b7.0","@material/theme":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-S1ImmDFfuV7K/nX9dB7n9DLMd+oQkOz0mEdRexjh9OqFMgLHMJg/OO+CRLrLIdjqy6ixoEFn8ZLHytXhUYRyoA==","shasum":"a2c1ee71d344de86e4d425a48a39bdeff5148526","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.69ba13b7.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9sCRA9TVsSAnZWagAA4VYP/34lJQkLsTjITP+vWfYM\nsW6tWYO82HlIv60cMH6ObKdE9+6wct1VQuEghM/yC9WE2TpJveUXJSWwdmwV\ncUBsU/ue/QGB2Jjl1AElycnRoKVsCwlp51RHlh4jlU5Z4mDCGtyJgbszkbQ+\nl8UhG2z1DDOt1ACmI0GoIt/8svD/2JgsxTmNyKvhXuu9EfdDGJZ4mOu32Ga+\nWtUGY+YSXi/TFoWSgaXNbi/o3hlaie1fnVEOlCBiAEK1H2e9ksxU7okqudRA\nNiYuin/ynwAPwFjChF+69DvlE36H+wCl41QpjPOPYACUiyUPxXEKbu2AG6Ci\nwFShakhshPi8tObPZacVr7A3I99e1GeP5oxhYc8MHOJvNovf9dtiQLXQqBLg\ntkMGoUpxJL+od/IHEgESRSkGfNcNg+fUHP/o13wa3xWlEqry3BjaHX05tLnH\nMOsmuD/4VAO8ZprELbxIoYIXwil+IF7nuWQAdODtizc8cbqtVmNRVmbd5yPC\nTEjQasTTMzF9r8JCrSaFjUXMUFhBrP4ZEzQOwDejLpate0jVbYho1Suz9img\nwEmywHoO0RRGBsv/2qC/o33DkXLXma7nzFnBaObIRBhgC1Bsf7tAoLQ8okUW\n/h7SJVjUrxAXacIUW7mRtsK0IufZwGhVfs4x0iDl+zJ/TB9s/Bn6Yg6yYchH\nq8De\r\n=aPR6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJCT1uXHT1RqffismPchHvTwUXPUOJQjIgYpya41RitQIhAL3y36DpHALj8TCSr4tbDTDBMiuQzYH1oDD9srhRi2oP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.69ba13b7.0_1642631020397_0.7623238935225582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0-canary.0af8ade5.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-circular-progress":"0.26.0-canary.0af8ade5.0","@material/theme":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-tT9i8RYdgucN32j8Tzq9kZuDPJiKZWsIeExMQY576TflByWtWaXuv8W4o+RUzuOWBwiTJ7FG2p8uizP0w86JRw==","shasum":"3e4c6e744a21b7a76b1bf9ca22977f695265cff1","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0-canary.0af8ade5.0.tgz","fileCount":16,"unpackedSize":38098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeMCRA9TVsSAnZWagAAHN0P/1Pw4a01ZuiPl4/KcIAa\nDIeQlK3+CRnfLklXROBnbR6wPCQvm84dZX50mHJI7RSbVNBGGcnf7Qp81m/7\ngfhYsf9r7lADVc9Lyaqkthc/wGOGIQl2PbV5VFQV1OwgoHUZNbT+tN58Vt3j\n6wdhiIz7ee21sAQ05gO2odDK4dQItjyW0PeWURMRqb5uJg6Q++MT1XPzNl2V\nEUY6Yrzj6vwsRll0rJ18hTUTYx09OKs6mRSeyRSuc08WUeioTczuvJc62bgr\nvXsH7S3CzuVGauYaAaXC01Q2y1JumvzG6YQCDPl8O7pyRxd9RH9FprkQC3A4\n9B06HuU3P1UlGhttomb6EwxD37Ryt46CyGKwYwAZeFmyqDq6xGFHFpDHbebl\noQqdhS/b2q3gElGraOkRhlMImIgP+Rkh72l/TpdkEDAzJ7EcwqZL4a1HmeUC\ns3ckvGLbcjdVqhw5yRfKOXoQTHZgN/jds9KDBvZ4aEEocypUVdIMD8lh1N3F\nRduw9LcsH3NraeKaHArf+U8xy9zAI0Xo1x9sjxL1YM7kQqZiD/GVJA9RYl25\nBP1KefMmE1sCwHXSXsql6CZTnH0iI637eX+U8GSElqh7H9fRA57VFo9IUg6o\nIzvn0cjuhhfyUXzH6rktc7HMEdusezT6cl7j2EYw0OmlEsxFavriRHNoX/rL\nP4kL\r\n=gQST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7p+emMy0YQuwJPe5w8NFFthxYgHJlDvlHpTdag0xnoQIhAM+ldjFWew3Agk8HhpbNqRXaykFzuHe2NQtaVZ1YncJr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0-canary.0af8ade5.0_1644271499916_0.19308081504877084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0","@material/mwc-base":"^0.26.0","@material/mwc-circular-progress":"^0.26.0","@material/theme":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-+iTm7L7YD487AF3RQPLvBL2TUv4b62Y3GUXsfQjTCNWuIoEIjJ92QMsOirZQ9rjbM9KiHPnwM7jMbjPcMLYE7Q==","shasum":"29e9446fe944cbb4461a2546d8957ad562debaea","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.0.tgz","fileCount":16,"unpackedSize":38002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwcsgwPIvCPRhlz4BksTUOMdp0dOEQ5rGgBUkhRiyHjAiAnCbf0G2lWNkZsRO3dDhjRIRr4yUpzLc6oZG2sBOJGwQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptgw//Xc7UrGtBxX8693rexI6g3lMR4k7KjucDujhlTKhdrSxNE0FT\r\n4fEmKAD1Fhgrlz6bsefVwmB9dIi88TSGRAHOgsvEnsJMiMR+Ys/7QSviBIZ1\r\nzsvE9uxVphucVEooeeMdmXpmN1IFcD4zzu1QYwRDiZiV+rW3E7qZQqeCdstG\r\nNNIgtkIhEltzSxi/TPhLr1W/Mng+/+GD6Xm/V01Ygiw58m74jx73LePkT2fm\r\nJTFrypttOZWYRLAdQKGsuf9aQmQgFCZ6mAIDHMjyPlq0IcShocQ0J8jWFr8u\r\noTkzHT2Off63K+I2BZEGyrCc940kRHIEuV2QRQjKLBS2z9MCMto88j9jy6Uz\r\nUQbKCH/ZprUctojZrj13QcTyqRVkej2LdNKfDtVp/Wkzo1KjMJkUbO6ct/Uo\r\njTF4K37SkxySvq7OJr42wtBdwFwIbeDgJfa/v/4/DwagvU0Kqwg6zHdSTX2/\r\nlSSfPoAsbwkYgyj0V7M9yU6dM0K2c73lrvrkabazmaU4GWCEdC4AG/N+2H4e\r\n8BkcTg/xaj0jICCwd8vSy9RRcjpBP6KP7+c2Ob5VEyCJEZ8GwC8jwaY6kYdQ\r\nB0o018ixR10WxXbLCs5v0RTgUJ7NTnJIpeB6L0B2XB9VPb3xhqD3vJQqHp4A\r\nL56YHe9Y6NFWqjOMK4WmEVP3swcXsXPT0is=\r\n=ECw4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.0_1651599032312_0.9456852258495925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-circular-progress-four-color","version":"0.26.1","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/mwc-circular-progress":"^0.26.1","@material/theme":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-Fgm81W0jkawYUPIJTnZXIDVF3Tt8YE9Z52U9Th5heVnCl7g+2Si+31PQt6G5dF4u5A7ej8Lx94O912m+UT1vtA==","shasum":"f38a8413b751ae5157d3cf67e0e56a3c6c1c9b95","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.26.1.tgz","fileCount":16,"unpackedSize":38106,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeOKSZJyT/KHvDfeZ5HjBXmiHNYilVmNKJ8b2P5DsHAAiEA9iCdFUeJggVhke2VcOVgH79vlk/Qz32F8BdgpsKrK3s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd7Q//anUUYUsxnoQE81mjH7fWwd13eypQcyIqgQKU7xp1B4/79kiI\r\nhPnceizSQm/Ab9p5X920f5Y2IuMgrKdxjf5EuqvOM+UaQI9PbowZnCNQxzQu\r\nfWGMv8Qb5exTlvh2gl9HagluCNzxV5/kF4ywbSS4fjehAZk0FKpZhtkWxLAo\r\n18ah7UbjTq4F4SaQ5mdNJQT+MVcSgC+lyVIGldrLdYypLiKzRWwspsA1/w+A\r\nNVhUOGQIk+F4IEapENbf1rPO5E4U+tXfvJQFdbL7QDzPw0RoAjeKGpREWVU5\r\nSB7gdEIYS1A/qCkQtsd964dxHM3FJCLDy48nNI1sIJVgQQ+mazylp1mLEUEb\r\nfn8plBiTckw66cqxr76Q13gr2USbtni9OKcj1q/3LeNRjyQcP8rDJ6tVIGHP\r\nFanL+Ix2jxx1FC5JcKH7BmhUuKeny8i0rUXTZrrJv5Nu5EYyxpbfkaN4ZTKb\r\nvciyLbJfry8q28YunDCwVDDaz05MQcqXj2XF31Sw3+xOlgE+32JHz4xXqwnB\r\nCIM5uPJPP67rmPNU6Hm8yS3b4otilns/ZQAIYa3TnqE3Nqzsg1UBfM6M++1G\r\nG99orJEKWsgTG2qLlg6FBwpE6/wK1hRWsApjAdnnE4OoIgGS+6QGCY3h2IsQ\r\nJWssOBs6KDHuayHWxJhH4R1uuZDxulEPCUk=\r\n=94i3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.26.1_1652128309853_0.7096615153442558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-circular-progress-four-color","version":"0.27.0","description":"Material Design circular progress web component","keywords":["material design","web components","circular progress"],"main":"mwc-circular-progress-four-color.js","module":"mwc-circular-progress-four-color.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"license":"Apache-2.0","dependencies":{"@material/circular-progress":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/mwc-circular-progress":"^0.27.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-circular-progress-four-color.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-circular-progress-four-color@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-E5A7D9sGs5CGunPyHLMbsRUFMaAHkjCWX+fMrXT2PqTymhNhQ3hLJGFit4TSCLErVtsQhymUF8yyR/9KOuP9Kg==","shasum":"66740647474791c8fce8ddbfd3e5ee2904a5d4b5","tarball":"https://registry.npmjs.org/@material/mwc-circular-progress-four-color/-/mwc-circular-progress-four-color-0.27.0.tgz","fileCount":16,"unpackedSize":38106,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXvBF9Q3cxImHqLcafL1OgpgfCj+pej7YaBRedUDJWTAiEAraUzQq77OcSGrHdyYxIjG6X2nFofWjpYJan/O9Ww6m8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpaaw//RNbIUkP/Ksl8EMkUPGOGqXPMkYppfNQijBgSPHzzAwGJiFrY\r\nJRgXbYI8zzul2RxzrWo2+0ChuNGgjdz8dKPFVMx1Yokqeu42GNFxSiGm7NAt\r\nUsIEhgtE/dukyYoiSOhvxAj4nC+6mcoTTSWKTs7zQ/h3zhL78RUUfKf1RuJs\r\nufozPWS3rhuPVOJdcaorF4FH9oHPJkhXxZ3bcUWkox1ZVGHUDgN/XKa9Bzc0\r\nupHHVHkswPtI7fH4O7/jCjx2DKMwndPIx3AzVn2Qxj8vWm4MvdEUCD6owIJv\r\nkRzYJiuLyOmfIb+r2jLsShcFN46/u3usMF3dGTpKxRu2JhQJKqQ5eEXbWDrJ\r\nUYBtUcj1sZ3C5dc/yx7aqGwWyE2Ik1wpITFuYoMqpwEh5hJejC1otjRyiKGx\r\njFjt1tIxKBSQZ3Ym6UBHYaDwXFdfEORYn/fHV6BbWkre6USQU8uPWlKcKPFW\r\nvOEU8IOEU7F8e6dh7R7fOadksk1VFBBZcwMEMij4oN7lmfggrIIAzLQirmVL\r\nIaebrHQgwzZPn+GDIx3XMKdLn9kyDCR5+cm7UubE11zqIq0Gtl2PRosemDbB\r\ni7Apg9xI0KvkMQWrt0uHfWy792n71KR1axWBJzwvMK7UDyn8mdz8n0finwv2\r\naUdl9xrvcXPp8S9x7EwxgIXA1y6NGDs1X7Y=\r\n=4PpG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-circular-progress-four-color_0.27.0_1660331527385_0.7064274872644614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2020-07-28T16:14:30.676Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:30.970Z","modified":"2024-04-04T18:47:08.725Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:41:54.055Z","0.18.0-canary.99df7397.0":"2020-07-29T02:39:53.074Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:02.594Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:20:48.770Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:20.674Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:42:38.688Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:39.678Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:03.072Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:20.928Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:39:58.526Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:31.609Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:14.505Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:38.250Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:02.013Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:36.388Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:28.444Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:31.988Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:16.078Z","0.18.0":"2020-08-03T21:24:21.740Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:46.309Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:01.807Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:40.117Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:52.202Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:19.842Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:16.707Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:42.748Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:18.940Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:39.123Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:48.588Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:22.511Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:19.884Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:53.508Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:38.536Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:04.172Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:23.339Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:26.711Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:15.133Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:30.393Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:58.798Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:25.196Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:19.021Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:56.619Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:38.866Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:02.599Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:42.383Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:48.693Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:56.073Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:55.180Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:22.176Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:59.369Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:28.180Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:08.083Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:43.553Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:00.628Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:17.588Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:08.952Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:02.065Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:05.712Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:13.432Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:30.817Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:00.567Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:04.110Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:26.319Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:29.426Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:49.160Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:31.512Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:01.923Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:09.242Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:12.422Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:09.030Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:27.310Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:07.768Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:02.383Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:13.813Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:24.025Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:13.981Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:27.151Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:46.478Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:11.514Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:48.796Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:27.923Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:33.945Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:25.936Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:38.756Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:03.222Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:18.239Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:15.493Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:22.254Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:21.521Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:10.360Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:05.241Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:43.995Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:20.517Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:49.606Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:03.032Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:19.013Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:39.627Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:27.885Z","0.19.0":"2020-10-07T22:33:29.033Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:38.411Z","0.19.1":"2020-10-08T23:05:56.839Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:56.089Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:15.298Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:08.285Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:15.966Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:48.439Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:25.128Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:22.700Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:10.313Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:53.671Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:10.681Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:47.423Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:57.366Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:04.569Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:53.327Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:30.470Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:34.107Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:39.617Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:45.103Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:39.390Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:47.521Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:57.556Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:02.831Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:58.822Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:42.610Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:23.322Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:52.281Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:48.936Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:42.167Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:04.762Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:38.104Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:56.788Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:49.685Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:31.753Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:13.291Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:31.840Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:05.157Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:15.500Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:11.810Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:04.407Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:44.738Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:21.875Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:03.700Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:13.717Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:38.498Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:53.110Z","0.20.0":"2020-12-03T22:28:54.120Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:46.019Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:48.099Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:53.169Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:43.476Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:43.940Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:00.799Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:36.368Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:33.528Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:28.854Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:09.632Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:03.639Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:58.534Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:25.332Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:52.198Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:07.793Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:51.195Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:25.092Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:10.794Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:08.507Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:21.603Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:24.582Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:15.783Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:09.277Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:42.599Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:18.739Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:33.250Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:33.233Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:27.376Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:24.572Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:21.967Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:21.251Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:41.528Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:46.608Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:08.970Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:25.964Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:56.602Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:08.547Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:22.713Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:03.647Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:33.450Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:33.727Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:22.360Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:40.582Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:01.287Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:11.994Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:31.770Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:56.508Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:44:41.602Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:49.620Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:57.105Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:14.987Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:48.967Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:56.802Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:00.782Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:21.946Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:50.282Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:53.729Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:11.223Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:10.542Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:55.539Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:07.801Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:03.871Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:21.589Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:34.939Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:47:16.099Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:58.476Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:33.356Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:11.422Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:04.134Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:26.591Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:33.403Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:26.835Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:08.883Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:15.556Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:53.624Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:39.600Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:10.469Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:14.386Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:36.584Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:17.350Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:44.898Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:42.492Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:53.545Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:16.585Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:19.240Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:47.575Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:30.906Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:56.506Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:34.561Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:12.754Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:56.550Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:55.498Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:12.414Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:48.456Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:25.617Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:20.682Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:33.935Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:10.650Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:22.959Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:03.964Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:06.866Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:19.584Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:56.886Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:01.196Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:16.310Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:37.645Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:48.755Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:59.394Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:24.483Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:31.730Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:26.568Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:08.503Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:44.589Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:14.103Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:48.072Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:18.348Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:58.846Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:55.769Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:30.339Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:04.862Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:25.342Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:14.663Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:24.252Z","0.21.0":"2021-04-30T23:58:08.632Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:12.126Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:07.190Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:31.125Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:33.609Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:51.410Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:16.270Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:07.400Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:50.173Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:47.003Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:13.467Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:08.400Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:22.320Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:29.907Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:12.588Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:59.111Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:34.658Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:25.579Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:16.805Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:20.172Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:07.204Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:18.261Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:50.000Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:22.201Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:57.400Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:32.603Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:21.031Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:52.502Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:07.723Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:53.900Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:53.106Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:21.558Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:42.163Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:08.807Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:17.137Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:20.687Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:20.619Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:59.189Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:58.376Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:16.159Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:03.667Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:08.533Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:09.527Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:01.150Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:57.431Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:24.198Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:04.519Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:31.099Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:59.480Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:14.636Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:46.344Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:37.240Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:30.841Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:01.095Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:02.067Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:56.872Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:10.896Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:38.861Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:56.757Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:16.683Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:13.458Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:09.585Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:26.215Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:40.226Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:40.006Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:30.175Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:59.404Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:35.345Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:31.094Z","0.22.0":"2021-07-14T22:38:55.575Z","0.22.1":"2021-07-14T22:52:50.907Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:00.313Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:29.218Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:38.013Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:34.733Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:59.669Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:44.395Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:56.363Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:11.110Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:43.877Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:02.700Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:32.047Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:00.940Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:29.064Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:38.416Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:32.404Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:36.033Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:33.386Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:52.794Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:51.921Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:59.713Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:08.372Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:11.124Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:45.830Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:46.129Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:59.184Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:00.643Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:16.199Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:17.795Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:59.957Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:46.680Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:41.737Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:41.611Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:24.459Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:35.913Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:49.629Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:22.701Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:45.455Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:27.959Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:49.212Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:54.771Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:35.538Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:59.410Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:08.772Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:55.042Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:20.729Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:14.464Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:18.726Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:10.185Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:16.420Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:16.401Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:27.337Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:08.407Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:35.967Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:53.003Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:11.408Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:52.403Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:35.344Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:56.528Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:10.195Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:49.336Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:40.213Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:52.197Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:39.968Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:29.821Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:56.522Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:26.934Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:40.180Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:06.543Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:19.796Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:30.580Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:43.425Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:17.400Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:53.441Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:39.088Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:14.325Z","0.23.0":"2021-09-13T21:35:52.540Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:04.043Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:05.914Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:14.157Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:12.795Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:49.835Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:06.401Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:44.386Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:32.396Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:09.526Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:39.128Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:32.387Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:04.323Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:43.373Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:06.361Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:51.161Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:44.028Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:37.296Z","0.25.0":"2021-09-21T02:53:03.569Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:07.685Z","0.25.1":"2021-09-21T03:12:42.429Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:04.252Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:13.704Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:42.236Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:32.947Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:04.733Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:19.065Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:27.939Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:47.598Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:46.226Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:49.854Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:13.454Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:30.681Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:11.917Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:18.574Z","0.25.2":"2021-10-11T23:18:32.371Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:25.502Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:53.101Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:33.889Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:26.436Z","0.25.3":"2021-10-21T17:55:44.372Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:22.535Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:51.804Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:42.642Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:21.950Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:48.066Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:30.190Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:55.944Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:58.654Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:51.766Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:24.059Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:02.993Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:00.747Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:34.831Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:53.177Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:31.707Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:50.630Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:49.071Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:41.746Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:40.560Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:00.055Z","0.26.0":"2022-05-03T17:30:32.525Z","0.26.1":"2022-05-09T20:31:50.114Z","0.27.0":"2022-08-12T19:12:07.626Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design circular progress web component","homepage":"https://github.com/material-components/material-components-web-components#readme","keywords":["material design","web components","circular progress"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/circular-progress-four-color"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-circular-progress-four-color>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-circular-progress-four-color.svg)](https://www.npmjs.com/package/@material/mwc-circular-progress-four-color)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nProgress indicators express an unspecified wait time or display the length of a\nprocess.\n\nThe four color circular progress indicator rotates between four colors in\nindeterminate mode.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)\n\n[Demo](https://material-components.github.io/material-web/demos/circular-progress/)\n\n## Example usage\n\n### Determinate\n\n```html\n<script type=\"module\">\n  import '@material/mwc-circular-progress-four-color/mwc-circular-progress-four-color.js';\n</script>\n<mwc-circular-progress-four-color progress=\"0.7\"></mwc-circular-progress-four-color>\n```\n\n### Indeterminate\n\n```html\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n### Styled\n\nThe four-color Circular Progress Indicator does not specify the value of the\nfour colors by default. These colors may be specified as follows:\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/circular-progress-four-color/images/showcase.gif\" height=\"48px\">\n\n```html\n<style>\n  mwc-circular-progress-four-color {\n    --mdc-circular-progress-bar-color-1: #2196f3;\n    --mdc-circular-progress-bar-color-2: #e91e63;\n    --mdc-circular-progress-bar-color-3: #ffc107;\n    --mdc-circular-progress-bar-color-4: #03dac5;\n  }\n</style>\n<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>\n```\n\n## API\n\n### Slots\n\nNone\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- | ------- | -----------\n| `indeterminate` | `boolean` | `false` | Sets the circular-progress into its indeterminate state.\n| `progress`      | `number`  | `0`     | Sets the progress bar's value. Value should be between [0, 1].\n| `density`       | `number`  | `0`     | Sets the progress indicator's sizing based on density scale. Minimum value is `-8`. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.\n| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.\n\n### Methods\n\nName              | Description\n----------------- | ------------------------------------------\n`open() => void`  | Sets `CircularProgress.closed` to `false`;\n`close() => void` | Sets `CircularProgress.closed` to `true`;\n\n### Events\n\nNone\n\n### CSS Custom Properties\n\nName                                  | Default                                                             | Description\n------------------------------------- | ------------------------------------------------------------------- | -----------\n`--mdc-circular-progress-bar-color-1` | `--mdc-theme-primary`                                               | Sets the first of the four rotating colors.\n`--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.\n`--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.\n`--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.\n`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.\n","readmeFilename":"README.md"}