{"id":19162341,"url":"https://github.com/agilie/gobutton","last_synced_at":"2025-05-07T10:41:26.120Z","repository":{"id":58240846,"uuid":"92181595","full_name":"agilie/GoButton","owner":"agilie","description":"This button is used for displaying an animation while a request is going. It could be run with infinite animation loop or with finish animation as well.","archived":false,"fork":false,"pushed_at":"2018-02-05T16:41:13.000Z","size":1519,"stargazers_count":51,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-19T21:24:45.826Z","etag":null,"topics":["animation","button-widget","html-css","jquery-plugin","loader","rotation"],"latest_commit_sha":null,"homepage":"https://agilie.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agilie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-23T14:19:31.000Z","updated_at":"2023-03-31T00:16:11.000Z","dependencies_parsed_at":"2022-08-31T09:40:27.352Z","dependency_job_id":null,"html_url":"https://github.com/agilie/GoButton","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/agilie%2FGoButton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FGoButton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FGoButton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FGoButton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agilie","download_url":"https://codeload.github.com/agilie/GoButton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252861775,"owners_count":21815749,"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":["animation","button-widget","html-css","jquery-plugin","loader","rotation"],"created_at":"2024-11-09T09:10:21.897Z","updated_at":"2025-05-07T10:41:26.069Z","avatar_url":"https://github.com/agilie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/agilie/GoButton\"\u003e\n  \u003cimg width=\"600\" src=\"examples/GoButton.png\" alt=\"Logo\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Check this project on \u003ca href=\"https://dribbble.com/shots/2896331-Flash-Garage-concept\"\u003e\n  Dribbble\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.agilie.com?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=Git_JS\u0026utm_term=GoButton\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Made%20by%20Agilie-*****-green.svg?style=flat\" alt=\"Made by Agilie\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/agilie/GoButton/blob/master/LICENSE.md\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/mashape/apistatus.svg\" alt=\"License\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n# GoButton\nThis button is used for displaying an animation while a request is going. It could be run with infinite animation loop or with finit animation as well.\n\n## Installation \n##### Standalon:\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/css/gobutton.css\" /\u003e\n\n\u003cscript src=\"jquery.min.css\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/js/gobutton.js\"\u003e\u003c/script\u003e\n```\n## How to use\n```html\n\u003cbutton class=\"foo\"\u003e\u003cimg src=\"https://image.svg\" style=\"height: 100%;\"\u003e\u003c/button\u003e\n\u003cbutton\u003eSome Text\u003c/button\u003e\n\n\u003cscript\u003e\n    $('button').gobutton(options);\n\u003c/script\u003e\n```\n##### As a result:\n```html\n\u003cdiv class=\"circle gobutton\" style=\"width: 100px; height: 100px; padding: 6px;\"\u003e\n    \u003cdiv class=\"loader\" style=\"background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);\"\u003e\u003c/div\u003e\n    \u003cbutton class=\"foo main circle\" style=\"width: 100px; height: 100px; background-color: rgb(37, 206, 209);\"\u003e\n        \u003cimg src=\"https://image.svg\" style=\"height: 100%;\"\u003e\n    \u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"circle gobutton\" style=\"width: 100px; height: 100px; padding: 6px;\"\u003e\n    \u003cdiv class=\"loader\" style=\"background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);\"\u003e\u003c/div\u003e\n    \u003cbutton class=\"main circle\" style=\"width: 100px; height: 100px; background-color: rgb(37, 206, 209);\"\u003e\n        Some Text\n    \u003c/button\u003e\n\u003c/div\u003e\n```\n### Configuration\n\u003ctable width=\"100%\"\u003e\n\t\u003ctr\u003e\n\t\t\u003cth valign=\"top\" width=\"120px\" align=\"left\"\u003eSetting name\u003c/th\u003e\n\t\t\u003cth valign=\"top\" align=\"left\"\u003eDescription\u003c/th\u003e\n\t\t\u003cth valign=\"top\" width=\"60px\" align=\"left\"\u003eType\u003c/th\u003e\n\t\t\u003cth valign=\"top\" width=\"60px\" align=\"left\"\u003eDefault value\u003c/th\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003esize\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tA button size (pixels)\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e\"100\"\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003ecolor\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tA button color (please, use CSS supported formats - RGB, RGBA, HEX ect.).\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e\"#25CED1\"\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eloaderGap\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tA gap between loader and button's body (pixels).\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e\"6\"\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eloaderWidth\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tA loader element width (pixels).\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e\"3\"\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eloaderColor\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tA loader color (RGB, RGBA or HEX format).\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e\"#25CED1\"\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003einfiniteSpin\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tInfinite animation flag.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eanimationSpeed\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tA time of the initial animation (seconds). The total animation time varies depending on the \"infiniteSpin\" flag. If the animation is finite then its time is equal to: animationSpeed + 0.5s.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eint\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e2.5\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eclasses\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tClasses which will be added to the wrapper element.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003e\"\"\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003edisable\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tThis setting adds the \"disabled\" attribute to the button. (Similarly to the native way - elem.disabled = true)\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n    \t\u003cth valign=\"top\" colspan=\"4\" align=\"left\"\u003eCallbacks\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eonStart()\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tAn event that triggers when the animation starts.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eonStop()\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tAn event that triggers after the download is completed.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eonAnimationStart(event)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tAn event that triggers after the start of each animation (see the list of animations). Animation event as a parameter.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003eonAnimationStop(event)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tAn event that triggers after the end of each animation (see the list of animations). Animation event as a parameter.\n\t\t\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n##### Animations list\n* *spin* - the main animation of the unwinding of the loader\n* *infinitespin* - run after *spin*. Animation of infinite rotation, it works if the flag was set.\n* *stopspin* - run after *spin*. Animation stops rotation, it works depending on the set flag of infinite animation.\n* *stop* - the rotation stop animation is triggered by a second press of the button or stopping via the stop method.\n\n##### Methods\nAvailable via gobutton object:\n```javascript\nvar gobutton = $('#gobutton').gobutton(options)[0].gobutton;\ngobutton.start();\n```\nor\n```javascript\nvar button = document.getElementById('gobutton');\n$(button).gobutton(options);\nbutton.gobutton.start();\n```\n\u003ctable width=\"100%\"\u003e\n    \u003ctr\u003e\n\t\t\u003cth valign=\"top\" width=\"120px\" align=\"left\"\u003eName\u003c/th\u003e\n\t\t\u003cth valign=\"top\" align=\"left\"\u003eDescription\u003c/th\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estart()\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tStart animation.\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003estop()\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tStop animation.\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003einfiniteStart(speed)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tRun infinite roatation animation. A time of one spin in seconds as a parameter.\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd valign=\"top\"\u003e\u003ccode\u003echangeOption(nameOrOptions, valueOrNothing || {})\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd valign=\"top\"\u003e\n        \tChange one of options. Option name and value, or options object as parameters.\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n## Examples \n##### \u003ca href=\"examples/base_usage/base_usage.html\" target=\"_blank\"\u003eBase usage\u003c/a\u003e\n```html\n    \u003cbutton\u003eGO\u003c/button\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        $('button').gobutton();\n    \u003c/script\u003e\n```\n![Preview](examples/base_usage/base_usage.gif)\n##### \u003ca href=\"examples/custom_size_with_infinite_spin/custom_size_with_infinite_spin.html\" target=\"_blank\"\u003eCustom size with infinite spin\u003c/a\u003e\n```html\n    \u003cbutton\u003eGO\u003c/button\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        $('button').gobutton({\n            size: 150,\n            loaderGap: '20',\n            loaderWidth: '3',\n            loaderColor: 'rgb(255,0,0)',\n            infiniteSpin: true\n         });\n    \u003c/script\u003e\n```\n\n![Preview](examples/custom_size_with_infinite_spin/custome_size.gif)\n\nTo make the loader rotation smoother, it should be supplemented with a semitransparent background of the same color. But there are cases when it loses its nicety: too large button sizes (\u003e100 pixels), a big gap between the button and the loader, low animation speed. Therefore, in these cases, you have to remove the background by writing the following style to the loader:\n```html\n\u003cstyle\u003e\n  .loader {\n    background-color: transparent!important;\n  }\n\u003c/style\u003e\n```\n![Preview](examples/custom_size_with_infinite_spin/transparetn_back.gif)\n\n## Troubleshooting\nProblems? Check the [Issues](https://github.com/agilie/GoButton/issues) block \nto find the solution or create an new issue that we will fix asap. Feel free to contribute.\n\n## Author\nThis jQuery plugin is open-sourced by [Agilie Team](https://www.agilie.com?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=Git_JS\u0026utm_term=GoButton) ([info@agilie.com](mailto:info@agilie.com))\n\n## Contributor\n[Agilie Team](https://github.com/agilie)\n\n## Contact us\nIf you have any questions, suggestions or just need a help with web or mobile development, please email us at \u003cweb@agilie.com\u003e. You can ask us anything from basic to complex questions.\n\nWe will continue publishing new open-source projects. Stay with us, more updates will follow!\n\n## License\nThe [MIT](LICENSE.md) License (MIT) Copyright © 2017 [Agilie Team](https://www.agilie.com?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=Git_JS\u0026utm_term=GoButton)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilie%2Fgobutton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagilie%2Fgobutton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilie%2Fgobutton/lists"}