Progress bar

This is pure JavaScript Progress bar plugins

License

Don`t use unsocial or illigle project

Three types of Progress bar in here

• Plain color
• Linear gradient
• Radial gradient

installation

Add only a script file in your html page

<script src='script.js'></script>

Add this css in your style sheet

svg {
     width: 300px;
     display: block;
     transform: rotate(-90deg);
     float: left;
}
svg text{
          transform: rotate(90deg);
          transform-origin: 50% 50%;
 }      

Add this markup in your markup sheet

<div id="progresbar"></div> 

Also add this script in your script file

This script fore plain color

---

    <script>
         progressbar('#progresbar3', {
                 backStrokeColor     : '#eee',
                 backFillColor       : 'none',
                 backStrokeWidth     : '4',                               
                 radius              : '30',               
                 frontStrokeColor    : '#ffcdc2',
                 frontStrokeWidth    : '6',
                 frontFillColor      : 'none',
                 strokeLineCap       : 'round',                
                 parcent             : '50'                
             });       
    </script>

---

You can change Plain color to linear gradient use this

 gradient : 'linear',
 gradColor: [
              {
                offset: "0%",
                stopColor : '#6b0404',
                stopOpacity : '1'
              },
              {
                offset: "40%",
                stopColor : 'red',
                stopOpacity : '1'
             }
             ]

You can also change Plain color to radial gradient use this

 gradient : 'radial',
 gradColor: [
              {
                offset: "0%",
                stopColor : '#6b0404',
                stopOpacity : '1'
              },
              {
                offset: "40%",
                stopColor : 'red',
                stopOpacity : '1'
              }
             ]

---

For The Clear Concept Please See The Markup Code

Note: This is Open source Plugins