Ajax Loader
HTML 
<div class = 'svg'>
1
<div class = 'svg'>
2
<svg width="465" height="465" viewBox = '-20 0 465 465'>
3
    <path id="p" d="M 100 350 L 200 50 300 350 Z" stroke="hsla(231, 5%, 85%, 1)" stroke-width="1" fill="none" />
4
</svg>
5
  <br />
6
<div class = 'input'>
7
<form oninput="val.value=ptrng.value">
8
<label>#Points&nbsp; <input id="ptrng" type="range" min="0" max="20" step="1"/>&nbsp;
9
<output name="val" for="ptrng"></output></label>
10
 </form>
11
  </div>
12
<p>*Note:<br>There are boundary issues within the container.<br>The object may get lost when it hits certain points.<br>Just adjust the slider && it will return into view.</p>
13
</div>
14
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Ubuntu:700);
1
@import url(http://fonts.googleapis.com/css?family=Ubuntu:700);
2
html, body {
3
  height: 100%;
4
}
5
 
6
body {
7
    font-family: 'Ubuntu', sans-serif;
8
    padding: 0;
9
    margin: 0;
10
    overflow:hidden;
11
    background-repeat: no-repeat;
12
    background-attachment: fixed;
13
    background: #282537;
14
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
15
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
16
  background-image:-moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
17
  cursor: move;
18
  -webkit-user-select:none;
19
     -moz-user-select:none;
20
      -ms-user-select:none;
21
          user-select:none;
22
}
23
svg{
24
  background-repeat: no-repeat;
25
  background-attachment: fixed;
26
  background: #282537;
27
  background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
28
  background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
29
  box-shadow:inset 4px 4px 8px 8px hsla(0,5%,5%,.07);
30
  border-radius:5px;
31
}
32
.svg{
33
  width:100%;
34
  text-align:center;
35
  margin-top:2%;
36
}
37
.input{
38
  padding:2em;
39
}
40
 
41
p{
42
  text-align:left;
43
  width:90%;
44
  line-height:1.5em;
45
  padding:.5em;
46
}
47
form,p{
48
  color:hsla(231, 5%, 85%, 1);
49
}
 
JavaScript 
var ss = 460; //svg size
1
var ss = 460; //svg size
2
var p = document.getElementById('p'),
3
  poly,
4
  $,
5
  FPS = 60;
6
 
7
function Pt(x, y) {
8
  this.x = x || 0;
9
  this.y = y || 0;
10
}
11
 
12
Pt.dist = function(a, b) {
13
  return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
14
};
15
 
16
function Rect(x, y, w, h) {
17
    this.x = 0;
18
    this.y = 0;
19
    this.w = w || 0; //width
20
    this.h = h || 0; //height
21
    this.l = x; //left
22
    this.r = x + w; //right
23
    this.t = y; //top
24
    this.b = y + h; //bottom
25
  }
26
  //verlet point
27
function vPt(x, y) {
28
    this.x = x || 0;
29
    this.y = y || 0;
30
    this.px = this.x;
31
    this.py = this.y;
32
  }
33
  //update
34
vPt.prototype.upd = function() {
35
    var tmpX = this.x,
36
      tmpY = this.y;
37
    this.x += this.getX();
38
    this.y += this.getY();
39
    this.px = tmpX;
40
    this.py = tmpY;
41
  }
42
  //set position
43
vPt.prototype.setPos = function(x, y) {
44
    this.x = this.px = x;
45
    this.y = this.py = y;
46
  }
47
  //contain
48
vPt.prototype.cont = function(rect) {
49
    this.x = Math.max(rect.l, Math.min(rect.r, this.x));
50
    this.y = Math.max(rect.t, Math.min(rect.b, this.y));
51
  }
52
  //set verlet x
53
vPt.prototype.setX = function(val) {
54
    this.px = this.x - val;
55
  }
56
  //get verlet x
57
vPt.prototype.getX = function() {
58
    return this.x - this.px;
59
  }
60
  //set verlet y
61
vPt.prototype.setY = function(val) {
62
    this.py = this.y - val;
63
  }
64
  //get verlet y
65
vPt.prototype.getY = function() {
66
    return this.y - this.py;
67
  }
68
  //verlet lines
69
function vLine(ptA, ptB, k, length) {
70
    this.ptA = ptA;
71
    this.ptB = ptB;
72
    this.k = k || 0.5;
73
    this.length = length || Pt.dist(ptA, ptB);
74
  }
75
  //update lines
76
vLine.prototype.upd = function() {
77
  var dx = this.ptB.x - this.ptA.x,
78
    dy = this.ptB.y - this.ptA.y,
79
    dist = Math.sqrt(dx * dx + dy * dy),
80
    diff = (this.length - dist) / dist,
81
    offX = diff * dx * this.k,
82
    offY = diff * dy * this.k;
83
  this.ptA.x -= offX;
84
  this.ptA.y -= offY;
85
  this.ptB.x += offX;
86
  this.ptB.y += offY;
87
}
88
 
89
//polygon (point, vertex, size, var k)
90
function Poly(pt, vert, size, k) {
91
  this.vert = vert;
92
  this.pts = [];
93
  this.lines = [];
94
 
95
  this.vx = 0.2;
96
 
97
  for (var v = 0; v < 2 * Math.PI; v += 2 * Math.PI / vert) {
98
    this.pts.push(
99
      new vPt(Math.cos(v) * size + pt.x, Math.sin(v) * size + pt.y)
100
    );
101
  }
102
 
103
  for (var i = 0, n = this.pts.length; i < n; i++) {
104
    pt = this.pts[i];
105
 
106
    for (var j = 0, m = this.pts.length; j < m; j++) {
107
      if (i !== j) {
108
        this.lines.push(
109
          new vLine(pt, this.pts[j], k)
110
        );
111
      }
112
    }
113
  }
114
}
115
 
116
Poly.prototype.upd = function() {
117
  var pt,
118
    line,
119
    i = 0,
120
    n = this.pts.length;
121
 
122
  for (; i < n; i++) {
123
    pt = this.pts[i];
124
    pt.y += this.vx;
125
    pt.upd();
126
    pt.cont($);
127
  }
128
 
129
  i = 0;
130
  n = this.lines.length;
131
  for (; i < n; i++) {
132
    line = this.lines[i];
133
    line.upd();
134
  }
135
}
136
 
137
Poly.prototype.draw = function() {
138
  var pt,
139
    line,
140
    i,
141
    n;
142
 
143
  var d = 'M ' + this.pts[0].x + ' ' + this.pts[0].y + ' L ';
144
 
145
  i = 0;
146
  n = this.pts.length;
147
  for (; i < n; i++) {
148
    pt = this.pts[i];
149
    d += ' ' + pt.x + ' ' + pt.y;
150
  }
151
 
152
  d += ' Q ';
153
 
154
  i = 0;
155
  n = this.lines.length;
156
 
157
  for (; i < n; i++) {
158
    line = this.lines[i];
159
    d += ' ' + line.ptA.x + ' ' + line.ptA.y;
160
    d += ' ' + line.ptB.x + ' ' + line.ptB.y;
161
  }
162
 
163
  d += ' Z';
164
  p.setAttribute('d', d);
165
}
166
var ms = {
167
  msup: 'mouseup',
168
  msmv: 'mousemove',
169
  msdn: 'mousedown'
170
}
171
document.addEventListener(ms.msdn, onMouseDown);
172
document.addEventListener(ms.msup, onMouseUp);
173
document.addEventListener(ms.msmv, onMouseMove);
174
 
175
var msdn,
176
  prevX = 0,
177
  prevY = 0;
178
 
179
function onMouseDown(e) {
180
  msdn = true;
181
  prevX = e.clientX;
182
  prevY = e.clientY;
183
}
184
 
185
function onMouseUp(e) {
186
  msdn = false;
187
}
188
 
189
function onMouseMove(e) {
190
  if (msdn) {
191
    for (var i = 0; i < poly.pts.length; i++) {
192
      poly.pts[i].x += (e.clientX - prevX) / 8;
193
      poly.pts[i].y += (e.clientY - prevY) / 8;
194
    }
195
    prevX = e.clientX;
196
    prevY = e.clientY;
197
  }
198
}
199
 
200
$ = new Rect(0, 0, ss, ss);
201
poly = new Poly(new Pt(220, 90), 9, 80, 0.025);
202
 
203
function loop() {
204
  poly.upd();
205
  poly.draw();
206
}
207
 
208
setInterval(loop, 1000 / FPS);
209
 
210
document.getElementById('ptrng').addEventListener('change', function(e) {
211
  poly = new Poly(new Pt(220, 90), e.currentTarget.value, 80, 0.025);
212
});
 

Verlet

CSSDeck G+