angular-svg-round-progressbar - Angular module that uses SVG to create a circular progressbar

  •        70

If you're using SystemJS as your module loader, there is also a UMD bundle at ./node_modules/angular-svg-round-progressbar/dist/round-progress.umd.js. The module comes with some pre-configured options for things like colors, size, stroke etc. If these don't match your app's design, you can change the global defaults by providing a new value for the ROUND_PROGRESS_DEFAULTS injection token. Whenever an option isn't defined on a round-progress element, it's value will be taken from the defaults.

https://github.com/crisbeto/angular-svg-round-progressbar

Tags
Implementation
License
Platform

   




Related Projects

progressbar.js - Responsive and slick progress bars

  •    Javascript

Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as you wish. Documentation is hosted at readthedocs.org.

react-native-progress - Progress indicators and spinners for React Native using ReactART

  •    Javascript

Progress indicators and spinners for React Native using ReactART. To use the Pie or Circle components, you need to include the ART library in your project on iOS, for android it's already included.

angular-loading-bar - A fully automatic loading / progress bar for your angular apps.

  •    Javascript

The idea is simple: Add a loading bar / progress bar whenever an XHR request goes out in angular. Multiple requests within the same time period get bundled together such that each response increments the progress bar by the appropriate amount.This is mostly cool because you simply include it in your app, and it works. There's no complicated setup, and no need to maintain the state of the loading bar; it's all handled automatically by the interceptor.

ngx-progressbar - Angular progress bar ☄

  •    TypeScript

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!


ngProgress - ⏳ Angular provider for slim loading bar at the top of the page ( inspired by https://github

  •    Javascript

ngProgress is a provider for angular for showing a loading status of something. Use cases can be fetching external resources, showing a action taking more-than-normal length or simple loading between the page views. Prefereble, only for resource heavy sites.Include ngProgress.js ( or ngProgress.min.js) and ngProgress.css in your website.

MKRingProgressView - ⭕️ Ring progress view similar to Activity app on Apple Watch

  •    Swift

See example Xcode project. It also contains additional classes for convenient grouping of 3 ring progress views replicating Activity app by Apple. MKRingProgressView can be set up in Storyboard. Specify startColor, endColor, ringWidth and optional backgroundRingColor (if not set, defaults to startColor with 15% opacity).

react-native-percentage-circle - 🐳 React Native Percentage Circle

  •    Javascript

React-Native-Percentage-Cirlce is a component which supports you define your percent and draw the circle.And also you can use it as a progress bar.And you can show some data in a circle you want.

HGCircularSlider - A custom reusable circular / progress slider control for iOS application.

  •    Swift

To run the example project, clone the repo, and run pod install from the Example directory first. Full documentation is available on CocoaDocs. You can also install documentation locally using jazzy.

react-progressbar.js - Responsive and slick progress bars for React.

  •    Javascript

This module is a React wrapper for progressbar.js. That's why most of the documentation refers to the original documentation. react-progressbar.js is lightweight, MIT licensed and supports all major browsers including IE9+.

jquery-circle-progress - jQuery Plugin to draw animated circular progress bars

  •    Javascript

If you use AMD or CommonJS with some JS bundler - see the UMD section below. Specify options like in example above.

paths-js - Generate SVG paths for geometric shapes :bar_chart:

  •    Javascript

Paths.js is a library to generate SVG paths, allowing you to create your own charts using a functional and testable API. It provides the primitives to create various shapes and charts starting from raw data, but it does not prescribe how you render these charts. This means you can use Paths.js to build components for your favorite frontend framework, and works even server-side on NodeJS. Paths.js offers three APIs, of increasing abstraction. The lowest level is a chainable API to generate an arbitrary SVG path. On top of this, paths for simple geometric shapes such as polygons or circle sectors are defined. At the highest level, there is an API to generate some simple graphs (pie, line chart, radar...) for a collection of data, assembling the simple shapes.

Android-RoundCornerProgressBar - Round Corner Progress Bar Library for Android

  •    Java

Colorful progress bar with round corner on progress which you can customized a color and corner radius.

angular-fontawesome - Font Awesome 5 Angular component using SVG with JS

  •    TypeScript

Built with ng-packagr and conforming to the Angular Package Format. Hey there! We're glad you're here...

FABProgressCircle - Material progress circle around any FloatingActionButton. 100% Guidelines.

  •    Java

Android library to provide a material progress circle around your FloatingActionButton. This component is compatible with any existent FAB. You can use the FABProgressCircle to wrap any existent FAB. Here you have an example wrapping the Google FloatingActionButton from the brand new Design Support Library.

CircleProgressBar - iOS Circle Progress Bar

  •    Objective-C

Circle Progress Bar iOS Control. Download source from this repository and copy CircleProgressBarDemo/CircleProgressBar folder to your project.

SuperTinyIcons - Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

  •    HTML

The logos have a 512x512 viewbox, they will fit in a circle with radius 256. They will scale up and down to suit your needs. Bytes cost money. They cost money to store, transport, and process. Simplicity should be our goal in all endeavours.

aSVERD

  •    Java

aSVERD is a little system for generating Entity Relationship Diagrams (ERD) as Scalable Vector Graphics (SVG). SVG can be viewed and zoomed in a Web Browser. The diagrams can be edited with an SVG editor and round-trip updated against the database.

progress-bar-animation - Making a Doughnut Progress Bar - research notes

  •    Javascript

Looking through the different CSS pie chart implementations I decided that CSS is not fitted for the job. All solutions were hacks that would be hard to control. I was also worried that it will be cumbersome to make it work on all the browsers that we support. Canvas, with almost universal support, seemed more appealing. However, canvas would require me to implement timing (e.g. easing functions) and scaling (to support higher dpis) myself. Besides, I though that it would not utilize GPU as well as CSS transitions/transforms. SVG seemed like the best of both worlds: it's universally supported, doesn't need any hacks to create a required shape, utilizes CSS transitions to create animations and fits all screen dpis out of the box. So, I dusted off my SVG knowledge and started coding. Happy with the result, I sprinkled it with some CSS magic and made a short video showing it in action.

ng-bootstrap - Angular powered Bootstrap

  •    TypeScript

Welcome to the Angular version of the Angular UI Bootstrap library. This library is being built from scratch by the ui-bootstrap team. We are using TypeScript and targeting the Bootstrap 4 CSS framework. As with Bootstrap 4, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.