├── .gitignore
├── .npmignore
├── LICENSE.md
├── README.md
├── bower.json
├── dist
    ├── css
    │   ├── gobutton.css
    │   └── gobutton.min.css
    └── js
    │   ├── gobutton.js
    │   └── gobutton.min.js
├── examples
    ├── GoButton.png
    ├── base_usage
    │   ├── base_usage.gif
    │   └── base_usage.html
    └── custom_size_with_infinite_spin
    │   ├── custom_size_with_infinite_spin.html
    │   ├── custome_size.gif
    │   └── transparetn_back.gif
├── gulpfile.js
├── index.html
├── package.json
└── src
    ├── css
        └── gobutton.css
    └── js
        └── gobutton.js


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | .DS_Store
3 | .idea/
4 | css/.DS_Store
5 | node_modules/
6 | bower_components/


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .idea/
3 | css/.DS_Store
4 | node_modules/
5 | css/*
6 | js/*
7 | lib/*
8 | bower_components/


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | 
3 | Copyright (c) 2016-2017 by Agilie Team <info@agilie.com>
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://github.com/agilie/GoButton">
  3 |   <img width="600" src="examples/GoButton.png" alt="Logo">
  4 |   </a>
  5 | </p>
  6 | <p align="center">
  7 |   Check this project on <a href="https://dribbble.com/shots/2896331-Flash-Garage-concept">
  8 |   Dribbble
  9 |   </a>
 10 | </p>
 11 | <p align="center">
 12 | <a href="https://www.agilie.com?utm_source=github&utm_medium=referral&utm_campaign=Git_JS&utm_term=GoButton">
 13 | <img src="https://img.shields.io/badge/Made%20by%20Agilie-*****-green.svg?style=flat" alt="Made by Agilie">
 14 | </a>
 15 | 
 16 | <a href="https://github.com/agilie/GoButton/blob/master/LICENSE.md">
 17 |   <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="License">
 18 | </a>
 19 | </p>
 20 | 
 21 | # GoButton
 22 | This 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.
 23 | 
 24 | ## Installation 
 25 | ##### Standalon:
 26 | ```html
 27 | <link rel="stylesheet" href="dist/css/gobutton.css" />
 28 | 
 29 | <script src="jquery.min.css"></script>
 30 | <script src="dist/js/gobutton.js"></script>
 31 | ```
 32 | ## How to use
 33 | ```html
 34 | <button class="foo"><img src="https://image.svg" style="height: 100%;"></button>
 35 | <button>Some Text</button>
 36 | 
 37 | <script>
 38 |     $('button').gobutton(options);
 39 | </script>
 40 | ```
 41 | ##### As a result:
 42 | ```html
 43 | <div class="circle gobutton" style="width: 100px; height: 100px; padding: 6px;">
 44 |     <div class="loader" style="background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);"></div>
 45 |     <button class="foo main circle" style="width: 100px; height: 100px; background-color: rgb(37, 206, 209);">
 46 |         <img src="https://image.svg" style="height: 100%;">
 47 |     </button>
 48 | </div>
 49 | 
 50 | <div class="circle gobutton" style="width: 100px; height: 100px; padding: 6px;">
 51 |     <div class="loader" style="background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);"></div>
 52 |     <button class="main circle" style="width: 100px; height: 100px; background-color: rgb(37, 206, 209);">
 53 |         Some Text
 54 |     </button>
 55 | </div>
 56 | ```
 57 | ### Configuration
 58 | <table width="100%">
 59 | 	<tr>
 60 | 		<th valign="top" width="120px" align="left">Setting name</th>
 61 | 		<th valign="top" align="left">Description</th>
 62 | 		<th valign="top" width="60px" align="left">Type</th>
 63 | 		<th valign="top" width="60px" align="left">Default value</th>
 64 | 	</tr>
 65 |     <tr>
 66 | 		<td valign="top"><code>size</code></td>
 67 | 		<td valign="top">
 68 |         	A button size (pixels)
 69 | 		</td>
 70 | 		<td valign="top"><code>string</code></td>
 71 | 		<td valign="top"><code>"100"</code></td>
 72 | 	</tr>
 73 |     <tr>
 74 | 		<td valign="top"><code>color</code></td>
 75 | 		<td valign="top">
 76 |         	A button color (please, use CSS supported formats - RGB, RGBA, HEX ect.).
 77 | 		</td>
 78 | 		<td valign="top"><code>string</code></td>
 79 | 		<td valign="top"><code>"#25CED1"</code></td>
 80 | 	</tr>
 81 |     <tr>
 82 | 		<td valign="top"><code>loaderGap</code></td>
 83 | 		<td valign="top">
 84 |         	A gap between loader and button's body (pixels).
 85 | 		</td>
 86 | 		<td valign="top"><code>string</code></td>
 87 | 		<td valign="top"><code>"6"</code></td>
 88 | 	</tr>
 89 |     <tr>
 90 | 		<td valign="top"><code>loaderWidth</code></td>
 91 | 		<td valign="top">
 92 |         	A loader element width (pixels).
 93 | 		</td>
 94 | 		<td valign="top"><code>string</code></td>
 95 | 		<td valign="top"><code>"3"</code></td>
 96 | 	</tr>
 97 |     <tr>
 98 | 		<td valign="top"><code>loaderColor</code></td>
 99 | 		<td valign="top">
100 |         	A loader color (RGB, RGBA or HEX format).
101 | 		</td>
102 | 		<td valign="top"><code>string</code></td>
103 | 		<td valign="top"><code>"#25CED1"</code></td>
104 | 	</tr>
105 |     <tr>
106 | 		<td valign="top"><code>infiniteSpin</code></td>
107 | 		<td valign="top">
108 |         	Infinite animation flag.
109 | 		</td>
110 | 		<td valign="top"><code>boolean</code></td>
111 | 		<td valign="top"><code>false</code></td>
112 | 	</tr>
113 |     <tr>
114 | 		<td valign="top"><code>animationSpeed</code></td>
115 | 		<td valign="top">
116 |         	A 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.
117 | 		</td>
118 | 		<td valign="top"><code>int</code></td>
119 | 		<td valign="top"><code>2.5</code></td>
120 | 	</tr>
121 |     <tr>
122 | 		<td valign="top"><code>classes</code></td>
123 | 		<td valign="top">
124 |         	Classes which will be added to the wrapper element.
125 | 		</td>
126 | 		<td valign="top"><code>string</code></td>
127 | 		<td valign="top"><code>""</code></td>
128 | 	</tr>
129 |     <tr>
130 | 		<td valign="top"><code>disable</code></td>
131 | 		<td valign="top">
132 |         	This setting adds the "disabled" attribute to the button. (Similarly to the native way - elem.disabled = true)
133 | 		</td>
134 | 		<td valign="top"><code>boolean</code></td>
135 | 		<td valign="top"><code>false</code></td>
136 | 	</tr>
137 |     <tr>
138 |     	<th valign="top" colspan="4" align="left">Callbacks</th>
139 |     </tr>
140 |     <tr>
141 | 		<td valign="top"><code>onStart()</code></td>
142 | 		<td valign="top">
143 |         	An event that triggers when the animation starts.
144 | 		</td>
145 | 		<td valign="top"><code>function</code></td>
146 | 		<td valign="top"><code>null</code></td>
147 | 	</tr>
148 |     <tr>
149 | 		<td valign="top"><code>onStop()</code></td>
150 | 		<td valign="top">
151 |         	An event that triggers after the download is completed.
152 | 		</td>
153 | 		<td valign="top"><code>function</code></td>
154 | 		<td valign="top"><code>null</code></td>
155 | 	</tr>
156 |     <tr>
157 | 		<td valign="top"><code>onAnimationStart(event)</code></td>
158 | 		<td valign="top">
159 |         	An event that triggers after the start of each animation (see the list of animations). Animation event as a parameter.
160 | 		</td>
161 | 		<td valign="top"><code>function</code></td>
162 | 		<td valign="top"><code>null</code></td>
163 | 	</tr>
164 |     <tr>
165 | 		<td valign="top"><code>onAnimationStop(event)</code></td>
166 | 		<td valign="top">
167 |         	An event that triggers after the end of each animation (see the list of animations). Animation event as a parameter.
168 | 		</td>
169 | 		<td valign="top"><code>function</code></td>
170 | 		<td valign="top"><code>null</code></td>
171 | 	</tr>
172 | </table>
173 | 
174 | ##### Animations list
175 | * *spin* - the main animation of the unwinding of the loader
176 | * *infinitespin* - run after *spin*. Animation of infinite rotation, it works if the flag was set.
177 | * *stopspin* - run after *spin*. Animation stops rotation, it works depending on the set flag of infinite animation.
178 | * *stop* - the rotation stop animation is triggered by a second press of the button or stopping via the stop method.
179 | 
180 | ##### Methods
181 | Available via gobutton object:
182 | ```javascript
183 | var gobutton = $('#gobutton').gobutton(options)[0].gobutton;
184 | gobutton.start();
185 | ```
186 | or
187 | ```javascript
188 | var button = document.getElementById('gobutton');
189 | $(button).gobutton(options);
190 | button.gobutton.start();
191 | ```
192 | <table width="100%">
193 |     <tr>
194 | 		<th valign="top" width="120px" align="left">Name</th>
195 | 		<th valign="top" align="left">Description</th>
196 | 	</tr>
197 |     <tr>
198 | 		<td valign="top"><code>start()</code></td>
199 | 		<td valign="top">
200 |         	Start animation.
201 | 		</td>
202 | 	</tr>
203 |     <tr>
204 | 		<td valign="top"><code>stop()</code></td>
205 | 		<td valign="top">
206 |         	Stop animation.
207 | 		</td>
208 | 	</tr>
209 |     <tr>
210 | 		<td valign="top"><code>infiniteStart(speed)</code></td>
211 | 		<td valign="top">
212 |         	Run infinite roatation animation. A time of one spin in seconds as a parameter.
213 | 		</td>
214 | 	</tr>
215 |     <tr>
216 | 		<td valign="top"><code>changeOption(nameOrOptions, valueOrNothing || {})</code></td>
217 | 		<td valign="top">
218 |         	Change one of options. Option name and value, or options object as parameters.
219 | 		</td>
220 | 	</tr>
221 | </table>
222 | 
223 | ## Examples 
224 | ##### <a href="examples/base_usage/base_usage.html" target="_blank">Base usage</a>
225 | ```html
226 |     <button>GO</button>
227 |     <script type="text/javascript">
228 |         $('button').gobutton();
229 |     </script>
230 | ```
231 | ![Preview](examples/base_usage/base_usage.gif)
232 | ##### <a href="examples/custom_size_with_infinite_spin/custom_size_with_infinite_spin.html" target="_blank">Custom size with infinite spin</a>
233 | ```html
234 |     <button>GO</button>
235 |     <script type="text/javascript">
236 |         $('button').gobutton({
237 |             size: 150,
238 |             loaderGap: '20',
239 |             loaderWidth: '3',
240 |             loaderColor: 'rgb(255,0,0)',
241 |             infiniteSpin: true
242 |          });
243 |     </script>
244 | ```
245 | 
246 | ![Preview](examples/custom_size_with_infinite_spin/custome_size.gif)
247 | 
248 | To 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 (>100 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:
249 | ```html
250 | <style>
251 |   .loader {
252 |     background-color: transparent!important;
253 |   }
254 | </style>
255 | ```
256 | ![Preview](examples/custom_size_with_infinite_spin/transparetn_back.gif)
257 | 
258 | ## Troubleshooting
259 | Problems? Check the [Issues](https://github.com/agilie/GoButton/issues) block 
260 | to find the solution or create an new issue that we will fix asap. Feel free to contribute.
261 | 
262 | ## Author
263 | This jQuery plugin is open-sourced by [Agilie Team](https://www.agilie.com?utm_source=github&utm_medium=referral&utm_campaign=Git_JS&utm_term=GoButton) ([info@agilie.com](mailto:info@agilie.com))
264 | 
265 | ## Contributor
266 | [Agilie Team](https://github.com/agilie)
267 | 
268 | ## Contact us
269 | If you have any questions, suggestions or just need a help with web or mobile development, please email us at <web@agilie.com>. You can ask us anything from basic to complex questions.
270 | 
271 | We will continue publishing new open-source projects. Stay with us, more updates will follow!
272 | 
273 | ## License
274 | The [MIT](LICENSE.md) License (MIT) Copyright © 2017 [Agilie Team](https://www.agilie.com?utm_source=github&utm_medium=referral&utm_campaign=Git_JS&utm_term=GoButton)
275 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gobutton",
 3 |   "description": "jQuery plugin which adds animation for html button",
 4 |   "main": [
 5 |     "dist/js/gobutton.js",
 6 |     "dist/css/gobutton.css"
 7 |   ],
 8 |   "version": "1.0.0",
 9 |   "authors": [
10 |     "Agilie Team <info@agilie.com> (https://agilie.com)"
11 |   ],
12 |   "contributors": [
13 |     "Bohdan Zolotukhyn <bohdan.zolotukhin@agilie.com> (https://github.com/fargo23)"
14 |   ],
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/agilie/GoButton"
18 |   },
19 |   "license": "MIT",
20 |   "keywords": [
21 |     "jquery",
22 |     "button",
23 |     "plugin",
24 |     "animation"
25 |   ],
26 |   "homepage": "",
27 |   "private": true,
28 |   "ignore": [
29 |     "**/.*",
30 |     "node_modules",
31 |     "bower_components",
32 |     "test",
33 |     "tests",
34 |     "index.html",
35 |     "gulpfile.js",
36 |     "package.json"
37 |   ],
38 |   "dependencies": {
39 |     "jquery": ""
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/dist/css/gobutton.css:
--------------------------------------------------------------------------------
  1 | .circle {
  2 | 	position: relative;
  3 | 	display: inline-block;
  4 | 	height: 70px;
  5 | 	width: 70px;
  6 | 	border-radius: 50%;
  7 | 	background-clip: padding-box;				
  8 | 	outline: 0;
  9 | 	border: 0;
 10 | }
 11 | .circle.main {
 12 | 	padding: 0;
 13 | 	background-color: #5a6bde;
 14 | 	background-repeat: no-repeat;
 15 | 	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
 16 | 	cursor: pointer;
 17 | 	overflow: hidden;
 18 | 	transform-origin: center center;
 19 | }
 20 | 
 21 | .circle.main:active {
 22 | 	transform: scale(0.95);
 23 | 	box-shadow: 0 4px 8px 0 rgba(0,0,0,.4);
 24 | }
 25 | 
 26 | .circle.gobutton {
 27 | 	padding: 4px;
 28 | 	background-color: transparent;			
 29 | 	background-position: center;
 30 | 	background-repeat: no-repeat;
 31 | 	background-size: contain;
 32 | 	border: 0;
 33 | 	outline: none;
 34 | }
 35 | 
 36 | .circle.gobutton .loader {
 37 | 	display: block;	
 38 | 	position: absolute;
 39 | 	width: 100%;
 40 | 	height: 100%;
 41 | 	top: 0;
 42 | 	left: 0;
 43 | 	right: 0;
 44 | 	bottom: 0;
 45 | 	margin: auto;
 46 | 	z-index: 0;
 47 | 	border-radius: 50%;
 48 | 	background-position: center;
 49 | 	background-repeat: no-repeat;
 50 | 	background-size: contain;
 51 | 	background-image: url('loader.svg');
 52 | 	opacity: 0;
 53 | 	background-color: rgba(255, 255, 255, 0.35);
 54 | }
 55 | 
 56 | .main.circle .shade {
 57 |     content: '';
 58 |     position: absolute;
 59 |     display: block;
 60 |     top: 0;
 61 |     left: 0;
 62 |     bottom: 0;
 63 |     right: 0;
 64 |     border-radius: inherit;
 65 |     margin: auto;
 66 |     z-index: 1;
 67 |     background-color: rgba(255,255,255,0.2);
 68 |     width: 0;
 69 |     height: 0;
 70 |     transform-origin: center center;
 71 | }
 72 | 
 73 | .main.circle .shade {
 74 |  	animation: blind .25s ease-in-out 0s 1;
 75 |  	width: 100%;
 76 |  	height: 100%;
 77 | }
 78 | 
 79 | @keyframes blind{
 80 | 	0% {
 81 | 		width: 0%;
 82 | 		height: 0%;
 83 | 	}
 84 | 
 85 | 	100% {
 86 | 		width: 100%;
 87 | 		height: 100%;
 88 | 	}
 89 | }
 90 | @keyframes stopspin{
 91 | 	0% {
 92 | 		opacity: 1;
 93 | 	}
 94 | 	50%{
 95 | 		opacity: 1;
 96 | 		width: 100%;
 97 | 		height: 100%;				
 98 | 		background-color: transparent;
 99 | 	}
100 | 	100% {
101 | 		width: 0%;
102 | 		height: 0%;
103 | 		opacity: 0;
104 | 		background-color: transparent;
105 | 		transform: rotate(1800deg);
106 | 	}
107 | }
108 | @keyframes stop{
109 | 	0% {
110 | 		opacity: 1;
111 | 	}
112 | 	50%{
113 | 		opacity: 1;
114 | 		width: 100%;
115 | 		height: 100%;			
116 | 		background-color: transparent;
117 | 	}
118 | 	100% {
119 | 		width: 0%;
120 | 		height: 0%;
121 | 		background-color: transparent;
122 | 		transform: rotate(1800deg);
123 | 	}
124 | }
125 | @keyframes spin{
126 | 	0% {
127 | 		opacity: 0.2;
128 | 		transform: rotate(0deg);
129 | 		background-color: transparent;
130 | 	}
131 | 	5%{
132 | 		opacity: 1;
133 | 	}
134 | 	70%{
135 | 		background-color: transparent;
136 | 	}
137 | 	100% {
138 | 		opacity: 1;
139 | 		transform: rotate(3600deg);
140 | 	}
141 | }
142 | @keyframes infinitespin{
143 | 	0% {
144 | 		opacity: 1;
145 | 		transform: rotate(0deg);
146 | 	}
147 | 	100% {
148 | 		opacity: 1;
149 | 		transform: rotate(360deg);
150 | 	}
151 | }


--------------------------------------------------------------------------------
/dist/css/gobutton.min.css:
--------------------------------------------------------------------------------
1 | .circle{position:relative;display:inline-block;height:70px;width:70px;border-radius:50%;background-clip:padding-box;outline:0;border:0}.circle.main{padding:0;background-color:#5a6bde;background-repeat:no-repeat;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);cursor:pointer;overflow:hidden;transform-origin:center center}.circle.main:active{transform:scale(.95);box-shadow:0 4px 8px 0 rgba(0,0,0,.4)}.circle.gobutton{padding:4px;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain;border:0;outline:0}.circle.gobutton .loader{display:block;position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;margin:auto;z-index:0;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:contain;background-image:url(loader.svg);opacity:0;background-color:rgba(255,255,255,.35)}.main.circle .shade{content:'';position:absolute;display:block;top:0;left:0;bottom:0;right:0;border-radius:inherit;margin:auto;z-index:1;background-color:rgba(255,255,255,.2);width:0;height:0;transform-origin:center center}.main.circle .shade{animation:blind .25s ease-in-out 0s 1;width:100%;height:100%}@keyframes blind{0%{width:0;height:0%}100%{width:100%;height:100%}}@keyframes stopspin{0%{opacity:1}50%{opacity:1;width:100%;height:100%;background-color:transparent}100%{width:0;height:0%;opacity:0;background-color:transparent;transform:rotate(1800deg)}}@keyframes stop{0%{opacity:1}50%{opacity:1;width:100%;height:100%;background-color:transparent}100%{width:0;height:0%;background-color:transparent;transform:rotate(1800deg)}}@keyframes spin{0%{opacity:.2;transform:rotate(0);background-color:transparent}5%{opacity:1}70%{background-color:transparent}100%{opacity:1;transform:rotate(3600deg)}}@keyframes infinitespin{0%{opacity:1;transform:rotate(0)}100%{opacity:1;transform:rotate(360deg)}}


--------------------------------------------------------------------------------
/dist/js/gobutton.js:
--------------------------------------------------------------------------------
  1 | (function( $ ) {
  2 | 	$.fn.gobutton = function(userSettings) {
  3 | 		var settings;
  4 | 		var options;
  5 | 		var loaderImage;
  6 | 		var wrap;
  7 | 
  8 | 		loaderImage = $('<div><svg width="101px" height="101px" viewBox="1310 528 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="rotate"><desc>Created with Sketch.</desc><defs><linearGradient x1="69.3641269%" y1="96.8508376%" x2="60.2027223%" y2="81.443299%" id="gradient"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#FFFFFF" stop-opacity="0" offset="90%"></stop></linearGradient></defs><path d="M1368.7985,626.292822 C1391.63073,622.356234 1409,602.456522 1409,578.5 C1409,551.71419 1387.28581,530 1360.5,530 C1333.71419,530 1312,551.71419 1312,578.5 C1312,599.965964 1325.94552,618.174777 1345.27099,624.560849" id="oval" stroke="url(#gradient)" stroke-width="4" stroke-linecap="round" fill="none"></path></svg></div>');
  9 | 
 10 | 		wrap = $('<div class="circle gobutton"><div class="loader"></div></div>');
 11 | 
 12 | 		settings = $.extend({
 13 | 			size: '100',
 14 | 			color: '#25CED1',
 15 | 			loaderGap: '6',
 16 | 			loaderColor: '#25CED1',
 17 | 			loaderWidth: '3',
 18 | 			infiniteSpin: false,
 19 | 			animationSpeed: 2.5,
 20 | 			waves: true,
 21 | 			classes: '',
 22 | 			disable: false,
 23 | 			onStop: null,
 24 | 			onStart: null,
 25 | 			onAnimationStop: null,
 26 | 			onAnimationStart: null
 27 | 		}, userSettings);
 28 | 
 29 | 		options = {
 30 | 			size: function(size) {
 31 | 				size = {
 32 | 					'width': size + 'px',
 33 | 					'height': size + 'px'
 34 | 				};
 35 | 				this.$content_wrap.css(size);
 36 | 				this.$content_button.css(size);
 37 | 			},
 38 | 			disable: function(flag) {
 39 | 				this.$content_button[0].disabled = flag;
 40 | 			},
 41 | 			color: function(color) {
 42 | 				this.$content_button.css({
 43 | 					'background-color': color
 44 | 				});
 45 | 			},
 46 | 			loaderGap: function(loaderGap) {
 47 | 				this.$content_wrap.css('padding', loaderGap + 'px');
 48 | 			},
 49 | 			loaderColor: function(loaderColor) {
 50 | 				this.$loader_img.find('#gradient stop').attr('stop-color', loaderColor);
 51 | 				this.$content_loader.css({
 52 | 					'background-image': 'url(data:image/svg+xml;base64,' + window.btoa(this.$loader_img.html()) + ')',
 53 | 					'background-color': returnLoaderBackground(loaderColor)
 54 | 				});
 55 | 			},
 56 | 			loaderWidth: function(loaderWidth) {
 57 | 				this.$loader_img.find('#oval').attr('stroke-width', loaderWidth);
 58 | 				this.$content_loader.css({
 59 | 					'background-image': 'url(data:image/svg+xml;base64,' + window.btoa(this.$loader_img.html()) + ')'
 60 | 				});
 61 | 			},
 62 | 			infiniteSpin: function(infiniteSpin) {
 63 | 				this.animation.infiniteSpin = infiniteSpin;
 64 | 			},
 65 | 			animationSpeed: function(animationSpeed) {
 66 | 				this.animation.speed = animationSpeed;
 67 | 			},
 68 | 			waves: function(waves) {
 69 | 				if (waves) {
 70 | 					this.$content_button[0].waveInd = -1;
 71 | 					this.$content_button[0].addEventListener('mousedown', addWave);
 72 | 					this.$content_button[0].addEventListener('mouseup', removeWaveOnMouseup);
 73 | 					this.$content_button[0].addEventListener('animationend', removeWaveOnAnimationend);
 74 | 				}
 75 | 				else {
 76 | 					delete this.$content_button[0].waveInd;
 77 | 					this.$content_button[0].removeEventListener('mousedown', addWave);
 78 | 					this.$content_button[0].removeEventListener('mouseup', removeWaveOnMouseup);
 79 | 					this.$content_button[0].removeEventListener('animationend', removeWaveOnAnimationend);
 80 | 				}
 81 | 			},
 82 | 			classes: function(classes) {
 83 | 				this.$content_wrap.addClass(classes);
 84 | 			},
 85 | 			onStop: function(func) {
 86 | 				this.onStop = func || pureFunc;
 87 | 			},
 88 | 			onStart: function(func) {
 89 | 				this.onStart = func || pureFunc;
 90 | 			},
 91 | 			onAnimationStop: function(func) {
 92 | 				this.onAnimationStop = func || pureFunc;
 93 | 			},
 94 | 			onAnimationStart: function(func) {
 95 | 				this.onAnimationStart = func || pureFunc;
 96 | 			}
 97 | 		};
 98 | 
 99 | 		return this.each(function() {
100 | 			if (this.tagName !== 'BUTTON') {
101 | 				return;
102 | 			}
103 | 			this.classList.add('main');
104 | 			this.classList.add('circle');
105 | 			
106 | 			var elem = $(this);
107 | 			var gobutton = this.gobutton = {};
108 | 			gobutton.$loader_img = loaderImage.clone();
109 | 			gobutton.$content_wrap = wrap.clone();
110 | 
111 | 			elem.after(gobutton.$content_wrap);
112 | 			gobutton.$content_wrap.append(this);
113 | 			gobutton.$content_button = gobutton.$content_wrap.find('.main');
114 | 			gobutton.$content_loader = gobutton.$content_wrap.find('.loader');
115 | 			gobutton.animation = {
116 | 				speed: '',
117 | 				infiniteSpin: false
118 | 			};
119 | 			gobutton.start = function() {
120 | 				animationStart.call(gobutton);
121 | 			};
122 | 
123 | 			gobutton.infiniteStart = function(speed) {
124 | 				animationInfiniteStart.call(gobutton, speed);
125 | 			};
126 | 			
127 | 			gobutton.stop = function() {
128 | 				animationStop.call(gobutton);
129 | 			};
130 | 
131 | 			gobutton.changeOption = function(nameOrOptions, value) {
132 | 				if (nameOrOptions instanceof Object) {
133 | 					for (var option in nameOrOptions) {
134 | 						if (options.hasOwnProperty(option)) {
135 | 							options[option].call(gobutton, nameOrOptions[option]);
136 | 						}
137 | 					}
138 | 				}
139 | 				else if (typeof nameOrOptions === 'string')
140 | 				{
141 | 					options[nameOrOptions].call(gobutton, value);
142 | 				} 
143 | 			};
144 | 
145 | 			gobutton.$content_button[0].addEventListener('mouseup',function(event) {
146 | 				if (event.button === 0) {
147 | 					runAnimation.call(gobutton);
148 | 				}
149 | 			});
150 | 
151 | 			gobutton.$content_button[0].disabled = settings.disabled;
152 | 
153 | 			gobutton.$content_loader[0].addEventListener('animationstart', function(event) {
154 | 				switch (event.animationName) {
155 | 					case 'spin':
156 | 						gobutton.onStart.call(gobutton);
157 | 						break;
158 | 					case 'stopspin':
159 | 						this.classList.remove('spin');
160 | 						break;
161 | 				}
162 | 				gobutton.onAnimationStart.call(gobutton, event);
163 | 			});
164 | 			gobutton.$content_loader[0].addEventListener('animationend', function(event) {
165 | 				gobutton.onAnimationStop.call(gobutton, event);
166 | 				if (event.animationName === 'stopspin' || event.animationName === 'stop') {
167 | 					this.classList.remove('spin');
168 | 					this.style.animation = '';
169 | 					gobutton.onStop.call(gobutton);
170 | 				}
171 | 			});
172 | 
173 | 			for (var setting in settings) {
174 |                 if (options.hasOwnProperty(setting)) {
175 |                     try {
176 |                         options[setting].call(gobutton, settings[setting]);
177 |                     } catch (e) {
178 |                         console.error(e);
179 |                     }
180 |                 }
181 |             }
182 | 
183 | 		});
184 | 
185 | 		function addWave(event) {
186 | 			if (event.button === 0) {
187 | 				this.waveInd++;
188 | 				var shade = document.createElement('div');
189 | 				shade.classList.add('shade');
190 | 				shade.style.backgroundColor = calcShadeColor(window.getComputedStyle(this).backgroundColor);
191 | 				this.appendChild(shade);
192 | 			}
193 | 		}
194 | 
195 | 		function removeWaveOnMouseup(event) {
196 | 			if (event.button !== 0) {
197 | 				return;
198 | 			}
199 | 			var shade = this.querySelectorAll('.shade')[this.waveInd];
200 | 			shade.mouseupEnd = true;
201 | 			if (shade.animationEnd) {
202 | 				shade.parentNode.removeChild(shade);
203 | 				this.waveInd--;
204 | 			}
205 | 		}
206 | 
207 | 		function removeWaveOnAnimationend(event) {
208 | 			var shade = event.target;
209 | 			shade.animationEnd = true;
210 | 			if (shade.mouseupEnd) {
211 | 				shade.parentNode.removeChild(shade);
212 | 				this.waveInd--;
213 | 			}
214 | 		}
215 | 
216 | 		function runAnimation() {
217 | 			if (!this.$content_loader[0].classList.contains('spin')) {
218 | 				animationStart.call(this);
219 | 			}
220 | 			else {
221 | 				animationStop.call(this);
222 | 			}
223 | 		}
224 | 
225 | 		function animationStart() {
226 | 			this.$content_loader[0].classList.add('spin');
227 | 			this.$content_loader[0].classList.remove('stopspin');
228 | 			this.$content_loader[0].style.animation = returnAnimation.call(this);
229 | 		}
230 | 
231 | 		function animationInfiniteStart(speed) {
232 | 			this.$content_loader[0].classList.add('spin');
233 | 			this.$content_loader[0].classList.remove('stopspin');
234 | 			this.$content_loader[0].style.animation = 'infinitespin ' + (speed || 0.12) + 's linear 0s infinite';
235 | 		}
236 | 
237 | 		function animationStop() {
238 | 			this.$content_loader[0].classList.add('stopspin');
239 | 			this.$content_loader[0].classList.remove('spin');
240 | 			this.$content_loader[0].style.animation = 'stop 0.5s linear 0s 1';
241 | 		}
242 | 
243 | 		function returnAnimation() {
244 | 			var animationSpeed = this.animation.speed;
245 | 			var infiniteSpin = this.animation.infiniteSpin;
246 | 			var infinitespinSpeed = ((animationSpeed * 2.5)/100);
247 | 			infinitespinSpeed = infinitespinSpeed < 0.12 ? 0.12 : infinitespinSpeed;
248 | 			var animations = {
249 | 				base: 'spin ' + animationSpeed + 's cubic-bezier(0.880, 0.160, 1.000, 0.985) 0.1s 1',
250 | 				stopWithDelay: ' stopspin 0.5s linear ' + animationSpeed + 's 1',
251 | 				infinite: ' infinitespin ' + infinitespinSpeed + 's linear ' + animationSpeed + 's infinite'
252 | 			};
253 | 			return animations.base + ', ' + (infiniteSpin ? animations.infinite : animations.stopWithDelay);
254 | 		}
255 | 
256 | 		function returnLoaderBackground(loaderColor) {
257 | 				if (loaderColor.indexOf('rgba') !== -1) {
258 | 					var arr = loaderColor.split(',');
259 | 					arr[3] = '.2)';
260 | 					return arr.join(',');
261 | 				}
262 | 				else if (loaderColor.indexOf('rgb') !== -1) {
263 | 					return loaderColor.replace('(','a(').replace(')',',.2)');
264 | 				}
265 | 				else if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(loaderColor)){
266 | 					return hexToRgbA(normolizeHex(loaderColor), 0.2);
267 | 				}
268 | 				else {
269 | 					return 'rgba(0,0,0,0)';
270 | 				}
271 | 		}
272 | 
273 | 		function hexToRgbA(hex, opacity){
274 | 		        var c = '0x' + hex;
275 | 		        return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + opacity + ')';
276 | 		}
277 | 
278 | 		function calcShadeColor(buttonColor) {
279 | 			// if (buttonColor.indexOf('rgb') > -1) {
280 | 				var rgb = buttonColor.split(',');
281 | 				rgb[0] = rgb[0].split('(')[1];
282 | 				rgb.push(rgb.pop().split(')')[0]);
283 | 				return contrastColor(rgbToHex(parseInt(rgb[0],10),parseInt(rgb[1],10),parseInt(rgb[2],10)));
284 | 			// }
285 | 			// else if (buttonColor.indexOf('#') > -1) {
286 | 			// 	return contrastColor(normolizeHex(buttonColor));
287 | 			// }
288 | 		}
289 | 
290 | 		function rgbToHex(r, g, b) {
291 | 			return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
292 | 		}
293 | 
294 | 		function normolizeHex(hex) {
295 | 			var c;
296 | 	        c = hex.substring(1).split('');
297 | 	        if (c.length === 3){
298 | 	            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
299 | 	        }
300 | 	        return c.join('');
301 | 		}
302 | 
303 | 		function  contrastColor(hexcolor) {
304 | 		    return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'rgba(86, 77, 77, 0.3)':'rgba(214, 205, 205, 0.2)';
305 | 		}
306 | 
307 | 		function pureFunc() {
308 | 
309 | 		}
310 | 
311 | 	}; 
312 | }(jQuery));
313 | 
314 | 
315 | 
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 


--------------------------------------------------------------------------------
/dist/js/gobutton.min.js:
--------------------------------------------------------------------------------
1 | !function(t){t.fn.gobutton=function(n){function i(t){if(0===t.button){this.waveInd++;var n=document.createElement("div");n.classList.add("shade"),n.style.backgroundColor=u(window.getComputedStyle(this).backgroundColor),this.appendChild(n)}}function o(t){if(0===t.button){var n=this.querySelectorAll(".shade")[this.waveInd];n.mouseupEnd=!0,n.animationEnd&&(n.parentNode.removeChild(n),this.waveInd--)}}function e(t){var n=t.target;n.animationEnd=!0,n.mouseupEnd&&(n.parentNode.removeChild(n),this.waveInd--)}function a(){this.$content_loader[0].classList.contains("spin")?c.call(this):s.call(this)}function s(){this.$content_loader[0].classList.add("spin"),this.$content_loader[0].classList.remove("stopspin"),this.$content_loader[0].style.animation=l.call(this)}function r(t){this.$content_loader[0].classList.add("spin"),this.$content_loader[0].classList.remove("stopspin"),this.$content_loader[0].style.animation="infinitespin "+(t||.12)+"s linear 0s infinite"}function c(){this.$content_loader[0].classList.add("stopspin"),this.$content_loader[0].classList.remove("spin"),this.$content_loader[0].style.animation="stop 0.5s linear 0s 1"}function l(){var t=this.animation.speed,n=this.animation.infiniteSpin,i=2.5*t/100;i=i<.12?.12:i;var o={base:"spin "+t+"s cubic-bezier(0.880, 0.160, 1.000, 0.985) 0.1s 1",stopWithDelay:" stopspin 0.5s linear "+t+"s 1",infinite:" infinitespin "+i+"s linear "+t+"s infinite"};return o.base+", "+(n?o.infinite:o.stopWithDelay)}function d(t){if(-1!==t.indexOf("rgba")){var n=t.split(",");return n[3]=".2)",n.join(",")}return-1!==t.indexOf("rgb")?t.replace("(","a(").replace(")",",.2)"):/^#([A-Fa-f0-9]{3}){1,2}$/.test(t)?p(f(t),.2):"rgba(0,0,0,0)"}function p(t,n){var i="0x"+t;return"rgba("+[i>>16&255,i>>8&255,255&i].join(",")+","+n+")"}function u(t){var n=t.split(",");return n[0]=n[0].split("(")[1],n.push(n.pop().split(")")[0]),m(h(parseInt(n[0],10),parseInt(n[1],10),parseInt(n[2],10)))}function h(t,n,i){return((1<<24)+(t<<16)+(n<<8)+i).toString(16).slice(1)}function f(t){var n;return n=t.substring(1).split(""),3===n.length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),n.join("")}function m(t){return parseInt(t,16)>8388607.5?"rgba(86, 77, 77, 0.3)":"rgba(214, 205, 205, 0.2)"}function v(){}var b,g,$,_;return $=t('<div><svg width="101px" height="101px" viewBox="1310 528 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="rotate"><desc>Created with Sketch.</desc><defs><linearGradient x1="69.3641269%" y1="96.8508376%" x2="60.2027223%" y2="81.443299%" id="gradient"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#FFFFFF" stop-opacity="0" offset="90%"></stop></linearGradient></defs><path d="M1368.7985,626.292822 C1391.63073,622.356234 1409,602.456522 1409,578.5 C1409,551.71419 1387.28581,530 1360.5,530 C1333.71419,530 1312,551.71419 1312,578.5 C1312,599.965964 1325.94552,618.174777 1345.27099,624.560849" id="oval" stroke="url(#gradient)" stroke-width="4" stroke-linecap="round" fill="none"></path></svg></div>'),_=t('<div class="circle gobutton"><div class="loader"></div></div>'),b=t.extend({size:"100",color:"#25CED1",loaderGap:"6",loaderColor:"#25CED1",loaderWidth:"3",infiniteSpin:!1,animationSpeed:2.5,waves:!0,classes:"",disable:!1,onStop:null,onStart:null,onAnimationStop:null,onAnimationStart:null},n),g={size:function(t){t={width:t+"px",height:t+"px"},this.$content_wrap.css(t),this.$content_button.css(t)},disable:function(t){this.$content_button[0].disabled=t},color:function(t){this.$content_button.css({"background-color":t})},loaderGap:function(t){this.$content_wrap.css("padding",t+"px")},loaderColor:function(t){this.$loader_img.find("#gradient stop").attr("stop-color",t),this.$content_loader.css({"background-image":"url(data:image/svg+xml;base64,"+window.btoa(this.$loader_img.html())+")","background-color":d(t)})},loaderWidth:function(t){this.$loader_img.find("#oval").attr("stroke-width",t),this.$content_loader.css({"background-image":"url(data:image/svg+xml;base64,"+window.btoa(this.$loader_img.html())+")"})},infiniteSpin:function(t){this.animation.infiniteSpin=t},animationSpeed:function(t){this.animation.speed=t},waves:function(t){t?(this.$content_button[0].waveInd=-1,this.$content_button[0].addEventListener("mousedown",i),this.$content_button[0].addEventListener("mouseup",o),this.$content_button[0].addEventListener("animationend",e)):(delete this.$content_button[0].waveInd,this.$content_button[0].removeEventListener("mousedown",i),this.$content_button[0].removeEventListener("mouseup",o),this.$content_button[0].removeEventListener("animationend",e))},classes:function(t){this.$content_wrap.addClass(t)},onStop:function(t){this.onStop=t||v},onStart:function(t){this.onStart=t||v},onAnimationStop:function(t){this.onAnimationStop=t||v},onAnimationStart:function(t){this.onAnimationStart=t||v}},this.each(function(){if("BUTTON"===this.tagName){this.classList.add("main"),this.classList.add("circle");var n=t(this),i=this.gobutton={};i.$loader_img=$.clone(),i.$content_wrap=_.clone(),n.after(i.$content_wrap),i.$content_wrap.append(this),i.$content_button=i.$content_wrap.find(".main"),i.$content_loader=i.$content_wrap.find(".loader"),i.animation={speed:"",infiniteSpin:!1},i.start=function(){s.call(i)},i.infiniteStart=function(t){r.call(i,t)},i.stop=function(){c.call(i)},i.changeOption=function(t,n){if(t instanceof Object)for(var o in t)g.hasOwnProperty(o)&&g[o].call(i,t[o]);else"string"==typeof t&&g[t].call(i,n)},i.$content_button[0].addEventListener("mouseup",function(t){0===t.button&&a.call(i)}),i.$content_button[0].disabled=b.disabled,i.$content_loader[0].addEventListener("animationstart",function(t){switch(t.animationName){case"spin":i.onStart.call(i);break;case"stopspin":this.classList.remove("spin")}i.onAnimationStart.call(i,t)}),i.$content_loader[0].addEventListener("animationend",function(t){i.onAnimationStop.call(i,t),"stopspin"!==t.animationName&&"stop"!==t.animationName||(this.classList.remove("spin"),this.style.animation="",i.onStop.call(i))});for(var o in b)if(g.hasOwnProperty(o))try{g[o].call(i,b[o])}catch(t){console.error(t)}}})}}(jQuery);


--------------------------------------------------------------------------------
/examples/GoButton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/agilie/GoButton/9fabac1a43f5d2dfcb51239184e1811bcc8003ad/examples/GoButton.png


--------------------------------------------------------------------------------
/examples/base_usage/base_usage.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/agilie/GoButton/9fabac1a43f5d2dfcb51239184e1811bcc8003ad/examples/base_usage/base_usage.gif


--------------------------------------------------------------------------------
/examples/base_usage/base_usage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 |         <script src="../../bower_components/jquery/dist/jquery.min.js"></script>
 5 | 		<script type="text/javascript" src="../../dist/js/gobutton.js" ></script>
 6 | 
 7 | 		<link rel="stylesheet" type="text/css" href="../../dist/css/gobutton.css">
 8 | 	</head>
 9 | 	<body style="display: flex; justify-content: center; align-items: center; height: 700px; background-color: #fff;">
10 | 		<style type="text/css">
11 | 			.main {
12 | 				font-size: 22px;
13 | 				letter-spacing: 1px;
14 | 				color: #fff;
15 | 			}
16 | 		</style>
17 | 
18 | 		<button class="">GO</button>
19 | 		<script type="text/javascript">
20 | 			$('button').gobutton();
21 | 		</script>
22 | 	</body>
23 | </html>
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/examples/custom_size_with_infinite_spin/custom_size_with_infinite_spin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 |         <script src="../../bower_components/jquery/dist/jquery.min.js"></script>
 5 | 		<script type="text/javascript" src="../../dist/js/gobutton.js" ></script>
 6 | 
 7 | 		<link rel="stylesheet" type="text/css" href="../../dist/css/gobutton.css">
 8 | 	</head>
 9 | 	<body style="display: flex; justify-content: center; align-items: center; height: 700px; background-color: #fff;">
10 | 		<style type="text/css">
11 | 			.main {
12 | 				font-size: 22px;
13 | 				letter-spacing: 1px;
14 | 				color: #fff;
15 | 			}
16 | 		</style>
17 |         <style>
18 |             .loader {
19 |                 background-color: transparent!important;
20 |             }
21 |         </style>
22 | 		<button class="">GO</button>
23 | 		<script type="text/javascript">
24 | 			$('button').gobutton({
25 |                 size: 150,
26 |                 loaderGap: '20',
27 |                 loaderWidth: '3',
28 |                 loaderColor: 'rgb(255,0,0)',
29 |                 infiniteSpin: true
30 |             });
31 | 		</script>
32 | 	</body>
33 | </html>
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/examples/custom_size_with_infinite_spin/custome_size.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/agilie/GoButton/9fabac1a43f5d2dfcb51239184e1811bcc8003ad/examples/custom_size_with_infinite_spin/custome_size.gif


--------------------------------------------------------------------------------
/examples/custom_size_with_infinite_spin/transparetn_back.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/agilie/GoButton/9fabac1a43f5d2dfcb51239184e1811bcc8003ad/examples/custom_size_with_infinite_spin/transparetn_back.gif


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var jshint = require('gulp-jshint');
 3 | var uglify = require('gulp-uglify');
 4 | var rename = require("gulp-rename");
 5 | var cleanCSS = require('gulp-clean-css');
 6 | var rseq = require('run-sequence');
 7 | 
 8 | gulp.task('min-css', function() {
 9 |     return gulp.src('src/css/*.css')
10 |         .pipe(cleanCSS({compatibility: 'ie8'}))
11 |         .pipe(rename({ suffix: '.min' }))
12 |         .pipe(gulp.dest('./dist/css/'));
13 | });
14 | 
15 | gulp.task('vet', function() {
16 |     return gulp.src('src/js/*.js')
17 |         .pipe(jshint())
18 |         .pipe(jshint.reporter('jshint-stylish', {verbose: true}))
19 |         .pipe(jshint.reporter('fail')) ;
20 | });
21 | 
22 | gulp.task('min-js', function() {
23 |     return gulp.src('src/js/*.js')
24 |         .pipe(uglify())
25 |         .pipe(rename({ suffix: '.min' }))
26 |         .pipe(gulp.dest('./dist/js/'));
27 | });
28 | 
29 | gulp.task('copy-js', function() {
30 |     gulp.src('src/js/*')
31 |         .pipe(gulp.dest('./dist/js/'));
32 | });
33 | gulp.task('copy-css', function() {
34 |     gulp.src('src/css/*')
35 |         .pipe(gulp.dest('./dist/css/'));
36 | });
37 | 
38 | gulp.task('dist', function(cb) {
39 |     return rseq('vet', 'copy-js', 'copy-css', 'min-js', 'min-css', cb);
40 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 |         <script src="bower_components/jquery/dist/jquery.min.js"></script>
 5 | 		<script type="text/javascript" src="src/js/gobutton.js" ></script>
 6 | 
 7 | 		<link rel="stylesheet" type="text/css" href="src/css/gobutton.css">
 8 | 	</head>
 9 | 	<body style="display: flex; justify-content: center; align-items: center; height: 700px; background-color: #fff;">
10 | 		<style type="text/css">
11 | 			.main {
12 | 				font-size: 22px;
13 | 				letter-spacing: 1px;
14 | 				color: #fff;
15 | 			}
16 | 		</style>
17 | 
18 | 		<button class="">GO</button>
19 | 		<script type="text/javascript">
20 | 			$('button').gobutton();
21 | 		</script>
22 | 	</body>
23 | </html>
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gobutton",
 3 |   "version": "1.0.0",
 4 |   "description": "jQuery plugin",
 5 |   "main": "dist/js/gobutton.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@github.com:agilie/GoButton.git"
12 |   },
13 |   "keywords": [
14 |     "jquery",
15 |     "button",
16 |     "plugin"
17 |   ],
18 |   "author": "Agilie Team <info@agilie.com> (https://agilie.com)",
19 |   "contributors": [
20 |       "Agilie Team <info@agilie.com> (https://github.com/agilie)"
21 |   ],
22 |   "license": "MIT",
23 |   "dependencies": {},
24 |   "devDependencies": {
25 |     "gulp": "^3.9.1",
26 |     "gulp-clean-css": "^3.0.4",
27 |     "gulp-jshint": "^2.0.4",
28 |     "gulp-rename": "^1.2.2",
29 |     "gulp-uglify": "^2.1.2",
30 |     "jshint": "^2.9.4",
31 |     "jshint-stylish": "^2.2.1",
32 |     "run-sequence": "^1.2.2"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/css/gobutton.css:
--------------------------------------------------------------------------------
  1 | .circle {
  2 | 	position: relative;
  3 | 	display: inline-block;
  4 | 	height: 70px;
  5 | 	width: 70px;
  6 | 	border-radius: 50%;
  7 | 	background-clip: padding-box;				
  8 | 	outline: 0;
  9 | 	border: 0;
 10 | }
 11 | .circle.main {
 12 | 	padding: 0;
 13 | 	background-color: #5a6bde;
 14 | 	background-repeat: no-repeat;
 15 | 	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
 16 | 	cursor: pointer;
 17 | 	overflow: hidden;
 18 | 	transform-origin: center center;
 19 | }
 20 | 
 21 | .circle.main:active {
 22 | 	transform: scale(0.95);
 23 | 	box-shadow: 0 4px 8px 0 rgba(0,0,0,.4);
 24 | }
 25 | 
 26 | .circle.gobutton {
 27 | 	padding: 4px;
 28 | 	background-color: transparent;			
 29 | 	background-position: center;
 30 | 	background-repeat: no-repeat;
 31 | 	background-size: contain;
 32 | 	border: 0;
 33 | 	outline: none;
 34 | }
 35 | 
 36 | .circle.gobutton .loader {
 37 | 	display: block;	
 38 | 	position: absolute;
 39 | 	width: 100%;
 40 | 	height: 100%;
 41 | 	top: 0;
 42 | 	left: 0;
 43 | 	right: 0;
 44 | 	bottom: 0;
 45 | 	margin: auto;
 46 | 	z-index: 0;
 47 | 	border-radius: 50%;
 48 | 	background-position: center;
 49 | 	background-repeat: no-repeat;
 50 | 	background-size: contain;
 51 | 	background-image: url('loader.svg');
 52 | 	opacity: 0;
 53 | 	background-color: rgba(255, 255, 255, 0.35);
 54 | }
 55 | 
 56 | .main.circle .shade {
 57 |     content: '';
 58 |     position: absolute;
 59 |     display: block;
 60 |     top: 0;
 61 |     left: 0;
 62 |     bottom: 0;
 63 |     right: 0;
 64 |     border-radius: inherit;
 65 |     margin: auto;
 66 |     z-index: 1;
 67 |     background-color: rgba(255,255,255,0.2);
 68 |     width: 0;
 69 |     height: 0;
 70 |     transform-origin: center center;
 71 | }
 72 | 
 73 | .main.circle .shade {
 74 |  	animation: blind .25s ease-in-out 0s 1;
 75 |  	width: 100%;
 76 |  	height: 100%;
 77 | }
 78 | 
 79 | @keyframes blind{
 80 | 	0% {
 81 | 		width: 0%;
 82 | 		height: 0%;
 83 | 	}
 84 | 
 85 | 	100% {
 86 | 		width: 100%;
 87 | 		height: 100%;
 88 | 	}
 89 | }
 90 | @keyframes stopspin{
 91 | 	0% {
 92 | 		opacity: 1;
 93 | 	}
 94 | 	50%{
 95 | 		opacity: 1;
 96 | 		width: 100%;
 97 | 		height: 100%;				
 98 | 		background-color: transparent;
 99 | 	}
100 | 	100% {
101 | 		width: 0%;
102 | 		height: 0%;
103 | 		opacity: 0;
104 | 		background-color: transparent;
105 | 		transform: rotate(1800deg);
106 | 	}
107 | }
108 | @keyframes stop{
109 | 	0% {
110 | 		opacity: 1;
111 | 	}
112 | 	50%{
113 | 		opacity: 1;
114 | 		width: 100%;
115 | 		height: 100%;			
116 | 		background-color: transparent;
117 | 	}
118 | 	100% {
119 | 		width: 0%;
120 | 		height: 0%;
121 | 		background-color: transparent;
122 | 		transform: rotate(1800deg);
123 | 	}
124 | }
125 | @keyframes spin{
126 | 	0% {
127 | 		opacity: 0.2;
128 | 		transform: rotate(0deg);
129 | 		background-color: transparent;
130 | 	}
131 | 	5%{
132 | 		opacity: 1;
133 | 	}
134 | 	70%{
135 | 		background-color: transparent;
136 | 	}
137 | 	100% {
138 | 		opacity: 1;
139 | 		transform: rotate(3600deg);
140 | 	}
141 | }
142 | @keyframes infinitespin{
143 | 	0% {
144 | 		opacity: 1;
145 | 		transform: rotate(0deg);
146 | 	}
147 | 	100% {
148 | 		opacity: 1;
149 | 		transform: rotate(360deg);
150 | 	}
151 | }


--------------------------------------------------------------------------------
/src/js/gobutton.js:
--------------------------------------------------------------------------------
  1 | (function( $ ) {
  2 | 	$.fn.gobutton = function(userSettings) {
  3 | 		var settings;
  4 | 		var options;
  5 | 		var loaderImage;
  6 | 		var wrap;
  7 | 
  8 | 		loaderImage = $('<div><svg width="101px" height="101px" viewBox="1310 528 101 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="rotate"><desc>Created with Sketch.</desc><defs><linearGradient x1="69.3641269%" y1="96.8508376%" x2="60.2027223%" y2="81.443299%" id="gradient"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#FFFFFF" stop-opacity="0" offset="90%"></stop></linearGradient></defs><path d="M1368.7985,626.292822 C1391.63073,622.356234 1409,602.456522 1409,578.5 C1409,551.71419 1387.28581,530 1360.5,530 C1333.71419,530 1312,551.71419 1312,578.5 C1312,599.965964 1325.94552,618.174777 1345.27099,624.560849" id="oval" stroke="url(#gradient)" stroke-width="4" stroke-linecap="round" fill="none"></path></svg></div>');
  9 | 
 10 | 		wrap = $('<div class="circle gobutton"><div class="loader"></div></div>');
 11 | 
 12 | 		settings = $.extend({
 13 | 			size: '100',
 14 | 			color: '#25CED1',
 15 | 			loaderGap: '6',
 16 | 			loaderColor: '#25CED1',
 17 | 			loaderWidth: '3',
 18 | 			infiniteSpin: false,
 19 | 			animationSpeed: 2.5,
 20 | 			waves: true,
 21 | 			classes: '',
 22 | 			disable: false,
 23 | 			onStop: null,
 24 | 			onStart: null,
 25 | 			onAnimationStop: null,
 26 | 			onAnimationStart: null
 27 | 		}, userSettings);
 28 | 
 29 | 		options = {
 30 | 			size: function(size) {
 31 | 				size = {
 32 | 					'width': size + 'px',
 33 | 					'height': size + 'px'
 34 | 				};
 35 | 				this.$content_wrap.css(size);
 36 | 				this.$content_button.css(size);
 37 | 			},
 38 | 			disable: function(flag) {
 39 | 				this.$content_button[0].disabled = flag;
 40 | 			},
 41 | 			color: function(color) {
 42 | 				this.$content_button.css({
 43 | 					'background-color': color
 44 | 				});
 45 | 			},
 46 | 			loaderGap: function(loaderGap) {
 47 | 				this.$content_wrap.css('padding', loaderGap + 'px');
 48 | 			},
 49 | 			loaderColor: function(loaderColor) {
 50 | 				this.$loader_img.find('#gradient stop').attr('stop-color', loaderColor);
 51 | 				this.$content_loader.css({
 52 | 					'background-image': 'url(data:image/svg+xml;base64,' + window.btoa(this.$loader_img.html()) + ')',
 53 | 					'background-color': returnLoaderBackground(loaderColor)
 54 | 				});
 55 | 			},
 56 | 			loaderWidth: function(loaderWidth) {
 57 | 				this.$loader_img.find('#oval').attr('stroke-width', loaderWidth);
 58 | 				this.$content_loader.css({
 59 | 					'background-image': 'url(data:image/svg+xml;base64,' + window.btoa(this.$loader_img.html()) + ')'
 60 | 				});
 61 | 			},
 62 | 			infiniteSpin: function(infiniteSpin) {
 63 | 				this.animation.infiniteSpin = infiniteSpin;
 64 | 			},
 65 | 			animationSpeed: function(animationSpeed) {
 66 | 				this.animation.speed = animationSpeed;
 67 | 			},
 68 | 			waves: function(waves) {
 69 | 				if (waves) {
 70 | 					this.$content_button[0].waveInd = -1;
 71 | 					this.$content_button[0].addEventListener('mousedown', addWave);
 72 | 					this.$content_button[0].addEventListener('mouseup', removeWaveOnMouseup);
 73 | 					this.$content_button[0].addEventListener('animationend', removeWaveOnAnimationend);
 74 | 				}
 75 | 				else {
 76 | 					delete this.$content_button[0].waveInd;
 77 | 					this.$content_button[0].removeEventListener('mousedown', addWave);
 78 | 					this.$content_button[0].removeEventListener('mouseup', removeWaveOnMouseup);
 79 | 					this.$content_button[0].removeEventListener('animationend', removeWaveOnAnimationend);
 80 | 				}
 81 | 			},
 82 | 			classes: function(classes) {
 83 | 				this.$content_wrap.addClass(classes);
 84 | 			},
 85 | 			onStop: function(func) {
 86 | 				this.onStop = func || pureFunc;
 87 | 			},
 88 | 			onStart: function(func) {
 89 | 				this.onStart = func || pureFunc;
 90 | 			},
 91 | 			onAnimationStop: function(func) {
 92 | 				this.onAnimationStop = func || pureFunc;
 93 | 			},
 94 | 			onAnimationStart: function(func) {
 95 | 				this.onAnimationStart = func || pureFunc;
 96 | 			}
 97 | 		};
 98 | 
 99 | 		return this.each(function() {
100 | 			if (this.tagName !== 'BUTTON') {
101 | 				return;
102 | 			}
103 | 			this.classList.add('main');
104 | 			this.classList.add('circle');
105 | 			
106 | 			var elem = $(this);
107 | 			var gobutton = this.gobutton = {};
108 | 			gobutton.$loader_img = loaderImage.clone();
109 | 			gobutton.$content_wrap = wrap.clone();
110 | 
111 | 			elem.after(gobutton.$content_wrap);
112 | 			gobutton.$content_wrap.append(this);
113 | 			gobutton.$content_button = gobutton.$content_wrap.find('.main');
114 | 			gobutton.$content_loader = gobutton.$content_wrap.find('.loader');
115 | 			gobutton.animation = {
116 | 				speed: '',
117 | 				infiniteSpin: false
118 | 			};
119 | 			gobutton.start = function() {
120 | 				animationStart.call(gobutton);
121 | 			};
122 | 
123 | 			gobutton.infiniteStart = function(speed) {
124 | 				animationInfiniteStart.call(gobutton, speed);
125 | 			};
126 | 			
127 | 			gobutton.stop = function() {
128 | 				animationStop.call(gobutton);
129 | 			};
130 | 
131 | 			gobutton.changeOption = function(nameOrOptions, value) {
132 | 				if (nameOrOptions instanceof Object) {
133 | 					for (var option in nameOrOptions) {
134 | 						if (options.hasOwnProperty(option)) {
135 | 							options[option].call(gobutton, nameOrOptions[option]);
136 | 						}
137 | 					}
138 | 				}
139 | 				else if (typeof nameOrOptions === 'string')
140 | 				{
141 | 					options[nameOrOptions].call(gobutton, value);
142 | 				} 
143 | 			};
144 | 
145 | 			gobutton.$content_button[0].addEventListener('mouseup',function(event) {
146 | 				if (event.button === 0) {
147 | 					runAnimation.call(gobutton);
148 | 				}
149 | 			});
150 | 
151 | 			gobutton.$content_button[0].disabled = settings.disabled;
152 | 
153 | 			gobutton.$content_loader[0].addEventListener('animationstart', function(event) {
154 | 				switch (event.animationName) {
155 | 					case 'spin':
156 | 						gobutton.onStart.call(gobutton);
157 | 						break;
158 | 					case 'stopspin':
159 | 						this.classList.remove('spin');
160 | 						break;
161 | 				}
162 | 				gobutton.onAnimationStart.call(gobutton, event);
163 | 			});
164 | 			gobutton.$content_loader[0].addEventListener('animationend', function(event) {
165 | 				gobutton.onAnimationStop.call(gobutton, event);
166 | 				if (event.animationName === 'stopspin' || event.animationName === 'stop') {
167 | 					this.classList.remove('spin');
168 | 					this.style.animation = '';
169 | 					gobutton.onStop.call(gobutton);
170 | 				}
171 | 			});
172 | 
173 | 			for (var setting in settings) {
174 |                 if (options.hasOwnProperty(setting)) {
175 |                     try {
176 |                         options[setting].call(gobutton, settings[setting]);
177 |                     } catch (e) {
178 |                         console.error(e);
179 |                     }
180 |                 }
181 |             }
182 | 
183 | 		});
184 | 
185 | 		function addWave(event) {
186 | 			if (event.button === 0) {
187 | 				this.waveInd++;
188 | 				var shade = document.createElement('div');
189 | 				shade.classList.add('shade');
190 | 				shade.style.backgroundColor = calcShadeColor(window.getComputedStyle(this).backgroundColor);
191 | 				this.appendChild(shade);
192 | 			}
193 | 		}
194 | 
195 | 		function removeWaveOnMouseup(event) {
196 | 			if (event.button !== 0) {
197 | 				return;
198 | 			}
199 | 			var shade = this.querySelectorAll('.shade')[this.waveInd];
200 | 			shade.mouseupEnd = true;
201 | 			if (shade.animationEnd) {
202 | 				shade.parentNode.removeChild(shade);
203 | 				this.waveInd--;
204 | 			}
205 | 		}
206 | 
207 | 		function removeWaveOnAnimationend(event) {
208 | 			var shade = event.target;
209 | 			shade.animationEnd = true;
210 | 			if (shade.mouseupEnd) {
211 | 				shade.parentNode.removeChild(shade);
212 | 				this.waveInd--;
213 | 			}
214 | 		}
215 | 
216 | 		function runAnimation() {
217 | 			if (!this.$content_loader[0].classList.contains('spin')) {
218 | 				animationStart.call(this);
219 | 			}
220 | 			else {
221 | 				animationStop.call(this);
222 | 			}
223 | 		}
224 | 
225 | 		function animationStart() {
226 | 			this.$content_loader[0].classList.add('spin');
227 | 			this.$content_loader[0].classList.remove('stopspin');
228 | 			this.$content_loader[0].style.animation = returnAnimation.call(this);
229 | 		}
230 | 
231 | 		function animationInfiniteStart(speed) {
232 | 			this.$content_loader[0].classList.add('spin');
233 | 			this.$content_loader[0].classList.remove('stopspin');
234 | 			this.$content_loader[0].style.animation = 'infinitespin ' + (speed || 0.12) + 's linear 0s infinite';
235 | 		}
236 | 
237 | 		function animationStop() {
238 | 			this.$content_loader[0].classList.add('stopspin');
239 | 			this.$content_loader[0].classList.remove('spin');
240 | 			this.$content_loader[0].style.animation = 'stop 0.5s linear 0s 1';
241 | 		}
242 | 
243 | 		function returnAnimation() {
244 | 			var animationSpeed = this.animation.speed;
245 | 			var infiniteSpin = this.animation.infiniteSpin;
246 | 			var infinitespinSpeed = ((animationSpeed * 2.5)/100);
247 | 			infinitespinSpeed = infinitespinSpeed < 0.12 ? 0.12 : infinitespinSpeed;
248 | 			var animations = {
249 | 				base: 'spin ' + animationSpeed + 's cubic-bezier(0.880, 0.160, 1.000, 0.985) 0.1s 1',
250 | 				stopWithDelay: ' stopspin 0.5s linear ' + animationSpeed + 's 1',
251 | 				infinite: ' infinitespin ' + infinitespinSpeed + 's linear ' + animationSpeed + 's infinite'
252 | 			};
253 | 			return animations.base + ', ' + (infiniteSpin ? animations.infinite : animations.stopWithDelay);
254 | 		}
255 | 
256 | 		function returnLoaderBackground(loaderColor) {
257 | 				if (loaderColor.indexOf('rgba') !== -1) {
258 | 					var arr = loaderColor.split(',');
259 | 					arr[3] = '.2)';
260 | 					return arr.join(',');
261 | 				}
262 | 				else if (loaderColor.indexOf('rgb') !== -1) {
263 | 					return loaderColor.replace('(','a(').replace(')',',.2)');
264 | 				}
265 | 				else if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(loaderColor)){
266 | 					return hexToRgbA(normolizeHex(loaderColor), 0.2);
267 | 				}
268 | 				else {
269 | 					return 'rgba(0,0,0,0)';
270 | 				}
271 | 		}
272 | 
273 | 		function hexToRgbA(hex, opacity){
274 | 		        var c = '0x' + hex;
275 | 		        return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + opacity + ')';
276 | 		}
277 | 
278 | 		function calcShadeColor(buttonColor) {
279 | 			// if (buttonColor.indexOf('rgb') > -1) {
280 | 				var rgb = buttonColor.split(',');
281 | 				rgb[0] = rgb[0].split('(')[1];
282 | 				rgb.push(rgb.pop().split(')')[0]);
283 | 				return contrastColor(rgbToHex(parseInt(rgb[0],10),parseInt(rgb[1],10),parseInt(rgb[2],10)));
284 | 			// }
285 | 			// else if (buttonColor.indexOf('#') > -1) {
286 | 			// 	return contrastColor(normolizeHex(buttonColor));
287 | 			// }
288 | 		}
289 | 
290 | 		function rgbToHex(r, g, b) {
291 | 			return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
292 | 		}
293 | 
294 | 		function normolizeHex(hex) {
295 | 			var c;
296 | 	        c = hex.substring(1).split('');
297 | 	        if (c.length === 3){
298 | 	            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
299 | 	        }
300 | 	        return c.join('');
301 | 		}
302 | 
303 | 		function  contrastColor(hexcolor) {
304 | 		    return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'rgba(86, 77, 77, 0.3)':'rgba(214, 205, 205, 0.2)';
305 | 		}
306 | 
307 | 		function pureFunc() {
308 | 
309 | 		}
310 | 
311 | 	}; 
312 | }(jQuery));
313 | 
314 | 
315 | 
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 


--------------------------------------------------------------------------------