You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.4 KiB
141 lines
3.4 KiB
var CirclesMaster = function () {
|
|
|
|
return {
|
|
|
|
//Circles Master v1
|
|
initCirclesMaster1: function () {
|
|
//Circles 1
|
|
Circles.create({
|
|
id: 'circle-1',
|
|
percentage: 87,
|
|
radius: 80,
|
|
width: 8,
|
|
number: 87,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 2
|
|
Circles.create({
|
|
id: 'circle-2',
|
|
percentage: 74,
|
|
radius: 80,
|
|
width: 8,
|
|
number: 74,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 3
|
|
Circles.create({
|
|
id: 'circle-3',
|
|
percentage: 65,
|
|
radius: 80,
|
|
width: 8,
|
|
number: 65,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 4
|
|
Circles.create({
|
|
id: 'circle-4',
|
|
percentage: 69,
|
|
radius: 35,
|
|
width: 2,
|
|
number: 69,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 5
|
|
Circles.create({
|
|
id: 'circle-5',
|
|
percentage: 82,
|
|
radius: 35,
|
|
width: 2,
|
|
number: 82,
|
|
text: '%',
|
|
colors: ['#eee', '#9B6BCC'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 6
|
|
Circles.create({
|
|
id: 'circle-6',
|
|
percentage: 87,
|
|
radius: 80,
|
|
width: 3,
|
|
number: 87,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 7
|
|
Circles.create({
|
|
id: 'circle-7',
|
|
percentage: 74,
|
|
radius: 80,
|
|
width: 3,
|
|
number: 74,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 8
|
|
Circles.create({
|
|
id: 'circle-8',
|
|
percentage: 65,
|
|
radius: 80,
|
|
width: 3,
|
|
number: 65,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
|
|
//Circles 9
|
|
Circles.create({
|
|
id: 'circle-9',
|
|
percentage: 91,
|
|
radius: 80,
|
|
width: 3,
|
|
number: 91,
|
|
text: '%',
|
|
colors: ['#eee', '#72c02c'],
|
|
duration: 2000
|
|
})
|
|
},
|
|
|
|
//Circles Master v2
|
|
initCirclesMaster2: function () {
|
|
var colors = [
|
|
['#D3B6C6', '#9B6BCC'], ['#C9FF97', '#72c02c'], ['#BEE3F7', '#3498DB'], ['#FFC2BB', '#E74C3C']
|
|
];
|
|
|
|
for (var i = 1; i <= 4; i++) {
|
|
var child = document.getElementById('circles-' + i),
|
|
percentage = 45 + (i * 9);
|
|
|
|
Circles.create({
|
|
id: child.id,
|
|
percentage: percentage,
|
|
radius: 70,
|
|
width: 2,
|
|
number: percentage / 1,
|
|
text: '%',
|
|
colors: colors[i - 1],
|
|
duration: 2000,
|
|
});
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
}(); |