// HTML code
<div id="circle-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let circle=new range.circle({
id:"circle-div",
width:200,
strokewidth:15,
percent:70,
rounded:false,
fontsize:33,
color:"red",
textcolor:"red",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
// trackfit:true,
//dashed:true,
unit:"%",
//fillbackground:"transparent"
})
// HTML code
<div id="circle2-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let circle2=new range.circle({
id:"circle2-div",
width:200,
strokewidth:15,
percent:65,
rounded:false,
fontsize:33,
color:"red",
textcolor:"red",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:",
unit:"%",
})
/*
these code below is not useful except want to
activate onclick function for stopwatch or timer ( customize clickeffect function )
** and note the setInterval can be use directly without the use of add eventlistener
*/
let count=0;
let condition=true;
document.querySelector("#circle2-div").addEventListener("click",function(){
let interval=setInterval(() => {
if(!condition){
let people2=new range.circle({
id:"circle2-div",
width:180,
strokewidth:15,
percent:count++,
rounded:false,
fontsize:33,
color:"red",
textcolor:"red",
textbold:100,
track:true,
indicator:true,
trackcolor:"",
trackfit:true,
unit:"%",
})
}
else{
clearInterval(interval)
}
}, 500);
condition=!condition;
})
// HTML code
<div id="circle3-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let people3=new range.circle({
id:"circle3-div",
width:180,
strokewidth:15,
percent:40,
rounded:false,
fontsize:33,
color:"red",
textcolor:"red",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
trackfit:true,
dashed:true,
unit:"%",
dashtrack:"2 3",
breakcolor:"white",
})
// HTML code
<div id="circle4-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let people4=new range.circle({
id:"click4-div",
width:180,
strokewidth:30,
percent:72,
rounded:true,
fontsize:25,
color:"linear-gradient(60deg,lightblue,blue)",
textcolor:"white",
textbold:100,
track:true,
trackfit:true,
indicator:true,
animate:false,
trackcolor:"rgba(0,0,0,0.07)",
unit:"%",
boxshadow:"0.3 0.1",
widestroke:true,
fillbackground:"rgb(70,70,70)",
balltip:true,
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","blue 100%"],
orientation:{x:50,y:50,fill:100}
},
widetrack:true,
})
/*
The setInterval function can also be use in the
range function
*/
// HTML code
<div id="rect-div">
<svg>
<rect/>
</svg>
</div>
// javascript code
let rectangle=new range.rectangle({
id:"rect-div",
width:150,
strokewidth:20,
color:"red",
track:true,
trackcolor:"",
percent:45,
rounded:true,
indicator:true,
textcolor:"black",
textbold:100,
fontsize:30,
unit:"px",
dashed:true,
breakcolor:"white"
})
/*
note that the option can be edited
*/
// HTML code
<div id="line-div">
</div>
// javascript code
let line=new range.line({
id:"line-div",
width:"100%",
strokewidth:20,
percent:47,
color:"red",
indicator:true,
trackcolor:"",
animate:false,
textcolor:"white",
roundrange:"50px"
})
/*
note setting (animate:true) will disable the indicator
*/
// HTML code
<div id="svg-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let you=new range.roller({
id:"svg-div",
width:100,
strokewidth:5,
rounded:false,
color:"orange",
animate:false,
track:false,
trackcolor:"",
percent:60,
ratio:2
})
// HTML code
<div id="square-div">
<svg>
<rect/>
</svg>
</div>
// javascript code
new range.rectangleroller({
id:"square-div",
width:100,
strokewidth:20,
color:"orange",
track:true,
trackcolor:"",
rounded:false,
})
// HTML code
<div id="circle5-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let circle5=new range.circle({
id:"circle5-div",
width:180,
strokewidth:15,
percent:30,
rounded:true,
fontsize:30,
color:"rgb(102, 73, 231)",
textcolor:"rgb(102, 73, 231)",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"%",
boxshadow:"0.2 0.1",
widestroke:true,
breakcolor:"white",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","blue 100%"],
orientation:{x:50,y:50,fill:100}
},
breakcolor:"white"
})