{"id":13547438,"url":"https://github.com/codrops/ElasticProgress","last_synced_at":"2025-04-02T19:33:06.282Z","repository":{"id":49383430,"uuid":"43001482","full_name":"codrops/ElasticProgress","owner":"codrops","description":"Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot \"Download\" by xjw","archived":false,"fork":false,"pushed_at":"2015-12-14T17:04:04.000Z","size":220,"stargazers_count":876,"open_issues_count":2,"forks_count":90,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-03-13T15:15:36.495Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tympanus.net/codrops/2015/09/23/elastic-progress/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codrops.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-23T13:08:31.000Z","updated_at":"2025-02-15T03:34:47.000Z","dependencies_parsed_at":"2022-08-25T13:31:34.932Z","dependency_job_id":null,"html_url":"https://github.com/codrops/ElasticProgress","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codrops%2FElasticProgress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codrops%2FElasticProgress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codrops%2FElasticProgress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codrops%2FElasticProgress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codrops","download_url":"https://codeload.github.com/codrops/ElasticProgress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880374,"owners_count":20848852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:00:55.613Z","updated_at":"2025-04-02T19:33:04.705Z","avatar_url":"https://github.com/codrops.png","language":"JavaScript","readme":"# Elastic Progress\nCreates a button that turns into a progress bar with a elastic effect. Based on a [Dribbble shot](https://dribbble.com/shots/1887815-Download) by [xjw](https://dribbble.com/xjw). By Lucas Bebber.\n\n[Article on Codrops](http://tympanus.net/codrops/?p=25030)\n\n[Demo](http://tympanus.net/Development/ElasticProgress/)\n\n![Elastic Progress](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/09/elasticprogress.gif)\n\n## Instructions\n\nThis project requires [GSAP](http://greensock.com/gsap). You can use either  TweenMax...\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js\"\u003e\u003c/script\u003e\n```\n\n...or TweenLite, with EasePack and the CSS and attr plugins:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/AttrPlugin.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include the `elastic-progress.min.js` file, located in the `dist` folder:\n\n```html\n\u003cscript src=\"path/to/js/elastic-progress.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\nCreate the element you want to turn into a button:\n\n```html\n\u003cdiv class=\"Upload\" role=\"button\" aria-label=\"Upload file\"\u003e\u003c/div\u003e\n```\n\u003csub\u003e **Note:** We are using a `div` element with `role=\"button\"` instead of a `button` element because, according to W3C recommendation, `button` elements should have no interactive elements as descendants. \u003c/sub\u003e\n\nThen, via JS:\n\n```js\nvar element=document.querySelector('.Upload');\nvar progress=new ElasticProgress(element, { /*options*/ });\n\n// or...\n\nvar progress=new ElasticProgress('.Upload', { /*options*/});\n```\n\nOr, in case you are using jQuery:\n\n```js\n$('.Upload').ElasticProgress({/*options*/});\n```\n\n### Setting Options\n\nOptions are set on the constructor, like this:\n```js\nvar progress=new ElasticProgress('.Upload', {\n  colorFg:\"#FF0000\",\n  buttonSize:80,\n  //...\n})\n```\n\nA [complete list of options](#options) can be found below.\n\n### Calling Methods\n\nThe button doesn't do much by itself - controlling the opening, bar progress, etc. is in your charge.\n\n```js\nvar progress=new ElasticProgress('.Upload', {\n  // ...\n  onClick:function(){\n    progress.open();\n  }\n});\nfunction theFunctionYouAreUsingToCheckProgress(){\n  // ...\n  progress.setValue(value);\n}\n\n\n// with jQuery\n$(\".Upload\").ElasticProgress({\n  // ...\n  onClick:function(){\n    $(this).ElasticProgress('open');\n  }\n});\n\nfunction theFunctionYouAreUsingToCheckProgress(){\n  // ...\n  $(\".Upload\").ElasticProgress('setValue',value);\n}\n\n```\n\nA [complete list of methods](#methods) can be found below.\n\n## Options\n\n* **arrowDirection** `string`  \nEither `'up'` or `'down'`. Defaults to `'down'`.\n\n#### Colors\n\n* **colorFg**, **colorBg** `string`  \nColors of the foreground (the arrow, the filled part of the progress bar) and the background (the circle, the empty part of the progress bar), respectively.\nDefaults are white and black.\n\n* **highlightColor** `string`  \nColor of the highlight outline. Defaults to `#08F`.\n\n* **background** `string`  \nColor of the overlay during the \"pop\" animation. Defaults to the background color of the `body`.\n\n#### Size\n\n* **buttonSize** `number`  \nCircumference of the button. Defaults to the height of the element.\n\n* **width** `number`  \nWidth of the expanded progress bar. Defaults to the width of the element.\n\n* **labelHeight** `number`  \nHeight of the label, in pixels. Defaults to 53.\n\n* **barHeight** `number`  \nThickness of the progress bar. Defaults to 4.\n\n* **barInset** `number`  \nInset of the filled part of the progress bar. Defaults to -0.5 \u003csub\u003eHelps covering jagged edges\u003c/sub\u003e.\n\n* **bleedTop**, **bleedRight**, **bleedLeft** and **bleedBottom** `number`  \nMargin to draw the graphics. If there's clipping during the animation, increase these values. Performance might take a hit for values too large.\nDefaults to 100, 50, 50 and 60 respectively.\n\n#### Text\n\n* **fontFamily** `string`  \nFont used for the label. Defaults to `'Helvetica Neue','Helvetica','Arial',sans-serif`. This default is added to the value set, so there's no need to manually set these as fallback.\n\n* **fontWeight** `string`  \nDefaults to `'bold'`.\n\n* **textComplete**, **textFail** and **textCancel** `string`  \nTexts that will be shown on these events. Defaults are `'Done'`, `'Failed'` and `'Canceled'`.\n\n#### Animation\n\n* **barStretch** `number`  \nThe maximum distance the bar will stretch. Defaults to 20.\n\n* **jumpHeight** `number`  \nHow hight the arrow/label will jump. Defaults to 50.\n\n* **barElasticOvershoot** and **barElasticPeriod** `number`  \nSettings for the elastic animation. Defaults are 1.8 and 0.15, respectively.\n\n* **labelWobbliness** `number`  \nSetting for the animation of the label during progress. Defaults to 40.\n\n* **arrowHangOnFail** and **arrowHangOnCancel** `boolean`  \nWhether the arrow should 'fall' on these events or not. Default is `true` for both.\n\n#### Events\n\n* **onClick** `function`  \nCalled when the user clicks the button only.\n\n* **onOpen** `function`  \nCalled when the progress bar finishes the opening animation.\n\n* **onChange** `function`  \nCalled when the bar value is changed.\n\n* **onComplete** `function`  \nCalled when the bar is full.\n\n* **onClose** `function`  \nCalled when the close animation is finished.\n\n* **onFail** `function`  \nCalled when the fail animation starts.\n\n* **onCancel** `function`  \nCalled when the cancel animation starts.\n\n## Methods\n\n* **open()**  \nStarts the opening animation (turns the button into a progress bar).\n\n* **close()**  \nTurns the progress bar back into a button.\n\n* **setValue(value`number`)**  \nSets the percentage loaded of the progress bar. From 0 to 1.\n\n* **getValue()** `number`  \nReturns the current value of the progress bar.\n\n* **fail()** and **cancel()**  \nRuns the fail and the cancel animations, respectively.\n\n* **complete()**  \nRuns the complete animation, regardless of the progress. You should probably call `setValue(1)` instead.\n\n* **onClick(callback`function`)**, **onOpen(callback`function`)**, **onChange(callback`function`)**, **onComplete(callback`function`)**, **onClose(callback`function`)**, **onFail(callback`function`)** and **onCancel(callback`function`)**  \nAliases to the options of the same name.\n\n## Build\n\nYou need [node and npm](https://nodejs.org/) installed. Clone the repo, and on the terminal enter:\n\n```\n$ npm install\n$ npm run build\n```\n\n## License\n\nIntegrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell \"as-is\".\n\nRead more here: [License](http://tympanus.net/codrops/licensing/)\n\n## Misc\n\nFollow Lucas: [Twitter](https://twitter.com/lucasbebber), [Codepen](http://codepen.io/lbebber/), [GitHub](https://github.com/lbebber)\n\nFollow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)\n\n[© Codrops 2015](http://www.codrops.com)\n","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects","JavaScript"],"sub_categories":["Button Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodrops%2FElasticProgress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodrops%2FElasticProgress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodrops%2FElasticProgress/lists"}