Progressbar.js is a beautiful, responsive progress bar effect with a dynamic SVG path. Using progressbar.js , you can easily create a progress bar of any shape. This JavaScript Library provides several built-in shapes such as lines, circles, and squares, but you can create your own progress bar effects using Illustrator or any other vector graphics editor.
Online Demo plugin Download
Line progress bar:
var line = new Progressbar.line (' #example-line-container ', { color: ' #FCB03C '}); line.animate (1);
Circular progress bar:
var circle = new Progressbar.circle (' #example-circle-container ', { color: ' #FCB03C ', strokewidth:2, fill : ' #aaa '}); Circle.animate (1, function () { circle.animate (0);})
Custom shapes and Paths:
var container = document.getElementById (' Example-custom-container '); container.innerhtml = ' <object id= ' scene ' type = "Image/svg+xml" data= "Images/moon-scene.svg" ></object> "var scene = document.getElementById (' scene '); Scene.addeventlistener (' Load ', function () { var path = new Progressbar.path (Scene.contentDocument.querySelector ( ' #asterism-path '), { duration:1000 }); Path.animate (1, function () { path.animate (0); });});
Related articles that may be of interest to you
- The JQuery effect "attached source" is very useful in website development
- Share 35 amazing CSS3 animation effects Demo
- Stunning 8 x HTML5 & JavaScript Effects
- Web development in a very practical 10 effects "source Download"
- 12 Classic white-rich jQuery images Carousel Plugin
This article link: progressbar.js– Beautiful responsive SVG progress bar
Compilation Source: Dream Sky focus on front-end development technology sharing web design resources
progressbar.js– Beautiful responsive SVG progress bar