Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
cdn
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
2
Merge Requests
2
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lambda
cdn
Commits
6560c142
Commit
6560c142
authored
Dec 24, 2018
by
李静静
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Delete spin.js
parent
152a3bbc
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
0 additions
and
377 deletions
+0
-377
spin.js
test/spin.js
+0
-377
No files found.
test/spin.js
deleted
100644 → 0
View file @
152a3bbc
/**
* Copyright (c) 2011-2014 Felix Gnass
* Licensed under the MIT license
* http://spin.js.org/
*
* Example:
var opts = {
lines: 12 // The number of lines to draw
, length: 7 // The length of each line
, width: 5 // The line thickness
, radius: 10 // The radius of the inner circle
, scale: 1.0 // Scales overall size of the spinner
, corners: 1 // Roundness (0..1)
, color: '#000' // #rgb or #rrggbb
, opacity: 1/4 // Opacity of the lines
, rotate: 0 // Rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 100 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout()
, zIndex: 2e9 // Use a high z-index by default
, className: 'spinner' // CSS class to assign to the element
, top: '50%' // center vertically
, left: '50%' // center horizontally
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration (might be buggy)
, position: 'absolute' // Element positioning
}
var target = document.getElementById('foo')
var spinner = new Spinner(opts).spin(target)
*/
;(
function
(
root
,
factory
)
{
/* CommonJS */
if
(
typeof
module
==
'object'
&&
module
.
exports
)
module
.
exports
=
factory
()
/* AMD module */
else
if
(
typeof
define
==
'function'
&&
define
.
amd
)
define
(
factory
)
/* Browser global */
else
root
.
Spinner
=
factory
()
}(
this
,
function
()
{
"use strict"
var
prefixes
=
[
'webkit'
,
'Moz'
,
'ms'
,
'O'
]
/* Vendor prefixes */
,
animations
=
{}
/* Animation rules keyed by their name */
,
useCssAnimations
/* Whether to use CSS animations or setTimeout */
,
sheet
/* A stylesheet to hold the @keyframe or VML rules. */
/**
* Utility function to create elements. If no tag name is given,
* a DIV is created. Optionally properties can be passed.
*/
function
createEl
(
tag
,
prop
)
{
var
el
=
document
.
createElement
(
tag
||
'div'
)
,
n
for
(
n
in
prop
)
el
[
n
]
=
prop
[
n
]
return
el
}
/**
* Appends children and returns the parent.
*/
function
ins
(
parent
/* child1, child2, ...*/
)
{
for
(
var
i
=
1
,
n
=
arguments
.
length
;
i
<
n
;
i
++
)
{
parent
.
appendChild
(
arguments
[
i
])
}
return
parent
}
/**
* Creates an opacity keyframe animation rule and returns its name.
* Since most mobile Webkits have timing issues with animation-delay,
* we create separate rules for each line/segment.
*/
function
addAnimation
(
alpha
,
trail
,
i
,
lines
)
{
var
name
=
[
'opacity'
,
trail
,
~~
(
alpha
*
100
),
i
,
lines
].
join
(
'-'
)
,
start
=
0.01
+
i
/
lines
*
100
,
z
=
Math
.
max
(
1
-
(
1
-
alpha
)
/
trail
*
(
100
-
start
),
alpha
)
,
prefix
=
useCssAnimations
.
substring
(
0
,
useCssAnimations
.
indexOf
(
'Animation'
)).
toLowerCase
()
,
pre
=
prefix
&&
'-'
+
prefix
+
'-'
||
''
if
(
!
animations
[
name
])
{
sheet
.
insertRule
(
'@'
+
pre
+
'keyframes '
+
name
+
'{'
+
'0%{opacity:'
+
z
+
'}'
+
start
+
'%{opacity:'
+
alpha
+
'}'
+
(
start
+
0.01
)
+
'%{opacity:1}'
+
(
start
+
trail
)
%
100
+
'%{opacity:'
+
alpha
+
'}'
+
'100%{opacity:'
+
z
+
'}'
+
'}'
,
sheet
.
cssRules
.
length
)
animations
[
name
]
=
1
}
return
name
}
/**
* Tries various vendor prefixes and returns the first supported property.
*/
function
vendor
(
el
,
prop
)
{
var
s
=
el
.
style
,
pp
,
i
prop
=
prop
.
charAt
(
0
).
toUpperCase
()
+
prop
.
slice
(
1
)
if
(
s
[
prop
]
!==
undefined
)
return
prop
for
(
i
=
0
;
i
<
prefixes
.
length
;
i
++
)
{
pp
=
prefixes
[
i
]
+
prop
if
(
s
[
pp
]
!==
undefined
)
return
pp
}
}
/**
* Sets multiple style properties at once.
*/
function
css
(
el
,
prop
)
{
for
(
var
n
in
prop
)
{
el
.
style
[
vendor
(
el
,
n
)
||
n
]
=
prop
[
n
]
}
return
el
}
/**
* Fills in default values.
*/
function
merge
(
obj
)
{
for
(
var
i
=
1
;
i
<
arguments
.
length
;
i
++
)
{
var
def
=
arguments
[
i
]
for
(
var
n
in
def
)
{
if
(
obj
[
n
]
===
undefined
)
obj
[
n
]
=
def
[
n
]
}
}
return
obj
}
/**
* Returns the line color from the given string or array.
*/
function
getColor
(
color
,
idx
)
{
return
typeof
color
==
'string'
?
color
:
color
[
idx
%
color
.
length
]
}
// Built-in defaults
var
defaults
=
{
lines
:
12
// The number of lines to draw
,
length
:
7
// The length of each line
,
width
:
5
// The line thickness
,
radius
:
10
// The radius of the inner circle
,
scale
:
1.0
// Scales overall size of the spinner
,
corners
:
1
// Roundness (0..1)
,
color
:
'#000'
// #rgb or #rrggbb
,
opacity
:
1
/
4
// Opacity of the lines
,
rotate
:
0
// Rotation offset
,
direction
:
1
// 1: clockwise, -1: counterclockwise
,
speed
:
1
// Rounds per second
,
trail
:
100
// Afterglow percentage
,
fps
:
20
// Frames per second when using setTimeout()
,
zIndex
:
2
e9
// Use a high z-index by default
,
className
:
'spinner'
// CSS class to assign to the element
,
top
:
'50%'
// center vertically
,
left
:
'50%'
// center horizontally
,
shadow
:
false
// Whether to render a shadow
,
hwaccel
:
false
// Whether to use hardware acceleration (might be buggy)
,
position
:
'absolute'
// Element positioning
}
/** The constructor */
function
Spinner
(
o
)
{
this
.
opts
=
merge
(
o
||
{},
Spinner
.
defaults
,
defaults
)
}
// Global defaults that override the built-ins:
Spinner
.
defaults
=
{}
merge
(
Spinner
.
prototype
,
{
/**
* Adds the spinner to the given target element. If this instance is already
* spinning, it is automatically removed from its previous target b calling
* stop() internally.
*/
spin
:
function
(
target
)
{
this
.
stop
()
var
self
=
this
,
o
=
self
.
opts
,
el
=
self
.
el
=
createEl
(
null
,
{
className
:
o
.
className
})
css
(
el
,
{
position
:
o
.
position
,
width
:
0
,
zIndex
:
o
.
zIndex
,
left
:
o
.
left
,
top
:
o
.
top
})
if
(
target
)
{
target
.
insertBefore
(
el
,
target
.
firstChild
||
null
)
}
el
.
setAttribute
(
'role'
,
'progressbar'
)
self
.
lines
(
el
,
self
.
opts
)
if
(
!
useCssAnimations
)
{
// No CSS animation support, use setTimeout() instead
var
i
=
0
,
start
=
(
o
.
lines
-
1
)
*
(
1
-
o
.
direction
)
/
2
,
alpha
,
fps
=
o
.
fps
,
f
=
fps
/
o
.
speed
,
ostep
=
(
1
-
o
.
opacity
)
/
(
f
*
o
.
trail
/
100
)
,
astep
=
f
/
o
.
lines
;(
function
anim
()
{
i
++
for
(
var
j
=
0
;
j
<
o
.
lines
;
j
++
)
{
alpha
=
Math
.
max
(
1
-
(
i
+
(
o
.
lines
-
j
)
*
astep
)
%
f
*
ostep
,
o
.
opacity
)
self
.
opacity
(
el
,
j
*
o
.
direction
+
start
,
alpha
,
o
)
}
self
.
timeout
=
self
.
el
&&
setTimeout
(
anim
,
~~
(
1000
/
fps
))
})()
}
return
self
}
/**
* Stops and removes the Spinner.
*/
,
stop
:
function
()
{
var
el
=
this
.
el
if
(
el
)
{
clearTimeout
(
this
.
timeout
)
if
(
el
.
parentNode
)
el
.
parentNode
.
removeChild
(
el
)
this
.
el
=
undefined
}
return
this
}
/**
* Internal method that draws the individual lines. Will be overwritten
* in VML fallback mode below.
*/
,
lines
:
function
(
el
,
o
)
{
var
i
=
0
,
start
=
(
o
.
lines
-
1
)
*
(
1
-
o
.
direction
)
/
2
,
seg
function
fill
(
color
,
shadow
)
{
return
css
(
createEl
(),
{
position
:
'absolute'
,
width
:
o
.
scale
*
(
o
.
length
+
o
.
width
)
+
'px'
,
height
:
o
.
scale
*
o
.
width
+
'px'
,
background
:
color
,
boxShadow
:
shadow
,
transformOrigin
:
'left'
,
transform
:
'rotate('
+
~~
(
360
/
o
.
lines
*
i
+
o
.
rotate
)
+
'deg) translate('
+
o
.
scale
*
o
.
radius
+
'px'
+
',0)'
,
borderRadius
:
(
o
.
corners
*
o
.
scale
*
o
.
width
>>
1
)
+
'px'
})
}
for
(;
i
<
o
.
lines
;
i
++
)
{
seg
=
css
(
createEl
(),
{
position
:
'absolute'
,
top
:
1
+
~
(
o
.
scale
*
o
.
width
/
2
)
+
'px'
,
transform
:
o
.
hwaccel
?
'translate3d(0,0,0)'
:
''
,
opacity
:
o
.
opacity
,
animation
:
useCssAnimations
&&
addAnimation
(
o
.
opacity
,
o
.
trail
,
start
+
i
*
o
.
direction
,
o
.
lines
)
+
' '
+
1
/
o
.
speed
+
's linear infinite'
})
if
(
o
.
shadow
)
ins
(
seg
,
css
(
fill
(
'#000'
,
'0 0 4px #000'
),
{
top
:
'2px'
}))
ins
(
el
,
ins
(
seg
,
fill
(
getColor
(
o
.
color
,
i
),
'0 0 1px rgba(0,0,0,.1)'
)))
}
return
el
}
/**
* Internal method that adjusts the opacity of a single line.
* Will be overwritten in VML fallback mode below.
*/
,
opacity
:
function
(
el
,
i
,
val
)
{
if
(
i
<
el
.
childNodes
.
length
)
el
.
childNodes
[
i
].
style
.
opacity
=
val
}
})
function
initVML
()
{
/* Utility function to create a VML tag */
function
vml
(
tag
,
attr
)
{
return
createEl
(
'<'
+
tag
+
' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">'
,
attr
)
}
// No CSS transforms but VML support, add a CSS rule for VML elements:
sheet
.
addRule
(
'.spin-vml'
,
'behavior:url(#default#VML)'
)
Spinner
.
prototype
.
lines
=
function
(
el
,
o
)
{
var
r
=
o
.
scale
*
(
o
.
length
+
o
.
width
)
,
s
=
o
.
scale
*
2
*
r
function
grp
()
{
return
css
(
vml
(
'group'
,
{
coordsize
:
s
+
' '
+
s
,
coordorigin
:
-
r
+
' '
+
-
r
})
,
{
width
:
s
,
height
:
s
}
)
}
var
margin
=
-
(
o
.
width
+
o
.
length
)
*
o
.
scale
*
2
+
'px'
,
g
=
css
(
grp
(),
{
position
:
'absolute'
,
top
:
margin
,
left
:
margin
})
,
i
function
seg
(
i
,
dx
,
filter
)
{
ins
(
g
,
ins
(
css
(
grp
(),
{
rotation
:
360
/
o
.
lines
*
i
+
'deg'
,
left
:
~~
dx
})
,
ins
(
css
(
vml
(
'roundrect'
,
{
arcsize
:
o
.
corners
})
,
{
width
:
r
,
height
:
o
.
scale
*
o
.
width
,
left
:
o
.
scale
*
o
.
radius
,
top
:
-
o
.
scale
*
o
.
width
>>
1
,
filter
:
filter
}
)
,
vml
(
'fill'
,
{
color
:
getColor
(
o
.
color
,
i
),
opacity
:
o
.
opacity
})
,
vml
(
'stroke'
,
{
opacity
:
0
})
// transparent stroke to fix color bleeding upon opacity change
)
)
)
}
if
(
o
.
shadow
)
for
(
i
=
1
;
i
<=
o
.
lines
;
i
++
)
{
seg
(
i
,
-
2
,
'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)'
)
}
for
(
i
=
1
;
i
<=
o
.
lines
;
i
++
)
seg
(
i
)
return
ins
(
el
,
g
)
}
Spinner
.
prototype
.
opacity
=
function
(
el
,
i
,
val
,
o
)
{
var
c
=
el
.
firstChild
o
=
o
.
shadow
&&
o
.
lines
||
0
if
(
c
&&
i
+
o
<
c
.
childNodes
.
length
)
{
c
=
c
.
childNodes
[
i
+
o
];
c
=
c
&&
c
.
firstChild
;
c
=
c
&&
c
.
firstChild
if
(
c
)
c
.
opacity
=
val
}
}
}
if
(
typeof
document
!==
'undefined'
)
{
sheet
=
(
function
()
{
var
el
=
createEl
(
'style'
,
{
type
:
'text/css'
})
ins
(
document
.
getElementsByTagName
(
'head'
)[
0
],
el
)
return
el
.
sheet
||
el
.
styleSheet
}())
var
probe
=
css
(
createEl
(
'group'
),
{
behavior
:
'url(#default#VML)'
})
if
(
!
vendor
(
probe
,
'transform'
)
&&
probe
.
adj
)
initVML
()
else
useCssAnimations
=
vendor
(
probe
,
'animation'
)
}
return
Spinner
}));
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment