ionic-Material Design , Codecanyon

IonicMaterialDesign/www/lib/angular-material/modules/js/progressCircular/bower.json

@@ -0,0 +1,7 @@
+{
+  "name": "angular-material-progressCircular",
+  "version": "0.10.0",
+  "dependencies": {
+    "angular-material-core": "0.10.0"
+  }
+}

IonicMaterialDesign/www/lib/angular-material/modules/js/progressCircular/progressCircular-default-theme.css

@@ -0,0 +1,36 @@
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v0.10.0
+ */
+/* mixin definition ; sets LTR and RTL within the same style call */
+md-progress-circular.md-THEME_NAME-theme {
+  background-color: transparent; }
+  md-progress-circular.md-THEME_NAME-theme .md-inner .md-gap {
+    border-top-color: '{{primary-color}}';
+    border-bottom-color: '{{primary-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme .md-inner .md-left .md-half-circle, md-progress-circular.md-THEME_NAME-theme .md-inner .md-right .md-half-circle {
+    border-top-color: '{{primary-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme .md-inner .md-right .md-half-circle {
+    border-right-color: '{{primary-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme .md-inner .md-left .md-half-circle {
+    border-left-color: '{{primary-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-gap {
+    border-top-color: '{{warn-color}}';
+    border-bottom-color: '{{warn-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-left .md-half-circle, md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-right .md-half-circle {
+    border-top-color: '{{warn-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-right .md-half-circle {
+    border-right-color: '{{warn-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-left .md-half-circle {
+    border-left-color: '{{warn-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-gap {
+    border-top-color: '{{accent-color}}';
+    border-bottom-color: '{{accent-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-left .md-half-circle, md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-right .md-half-circle {
+    border-top-color: '{{accent-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-right .md-half-circle {
+    border-right-color: '{{accent-color}}'; }
+  md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-left .md-half-circle {
+    border-left-color: '{{accent-color}}'; }

IonicMaterialDesign/www/lib/angular-material/modules/js/progressCircular/progressCircular-default-theme.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v0.10.0
+ */md-progress-circular.md-THEME_NAME-theme{background-color:transparent}md-progress-circular.md-THEME_NAME-theme .md-inner .md-gap{border-top-color:'{{primary-color}}';border-bottom-color:'{{primary-color}}'}md-progress-circular.md-THEME_NAME-theme .md-inner .md-left .md-half-circle,md-progress-circular.md-THEME_NAME-theme .md-inner .md-right .md-half-circle{border-top-color:'{{primary-color}}'}md-progress-circular.md-THEME_NAME-theme .md-inner .md-right .md-half-circle{border-right-color:'{{primary-color}}'}md-progress-circular.md-THEME_NAME-theme .md-inner .md-left .md-half-circle{border-left-color:'{{primary-color}}'}md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-gap{border-top-color:'{{warn-color}}';border-bottom-color:'{{warn-color}}'}md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-left .md-half-circle,md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-right .md-half-circle{border-top-color:'{{warn-color}}'}md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-right .md-half-circle{border-right-color:'{{warn-color}}'}md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-left .md-half-circle{border-left-color:'{{warn-color}}'}md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-gap{border-top-color:'{{accent-color}}';border-bottom-color:'{{accent-color}}'}md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-left .md-half-circle,md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-right .md-half-circle{border-top-color:'{{accent-color}}'}md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-right .md-half-circle{border-right-color:'{{accent-color}}'}md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-left .md-half-circle{border-left-color:'{{accent-color}}'}

IonicMaterialDesign/www/lib/angular-material/modules/js/progressCircular/progressCircular.js

@@ -0,0 +1,110 @@
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v0.10.0
+ */
+(function( window, angular, undefined ){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.progressCircular
+ * @description Circular Progress module!
+ */
+angular.module('material.components.progressCircular', [
+  'material.core'
+])
+  .directive('mdProgressCircular', MdProgressCircularDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdProgressCircular
+ * @module material.components.progressCircular
+ * @restrict E
+ *
+* @description
+ * The circular progress directive is used to make loading content in your app as delightful and
+ * painless as possible by minimizing the amount of visual change a user sees before they can view
+ * and interact with content.
+ *
+ * For operations where the percentage of the operation completed can be determined, use a
+ * determinate indicator. They give users a quick sense of how long an operation will take.
+ *
+ * For operations where the user is asked to wait a moment while something finishes up, and it’s
+ * not necessary to expose what's happening behind the scenes and how long it will take, use an
+ * indeterminate indicator.
+ *
+ * @param {string} md-mode Select from one of two modes: determinate and indeterminate.
+ * @param {number=} value In determinate mode, this number represents the percentage of the
+ *     circular progress. Default: 0
+ * @param {number=} md-diameter This specifies the diamter of the circular progress. Default: 48
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-progress-circular md-mode="determinate" value="..."></md-progress-circular>
+ *
+ * <md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular>
+ *
+ * <md-progress-circular md-mode="determinate" value="..." md-diameter="100"></md-progress-circular>
+ *
+ * <md-progress-circular md-mode="indeterminate"></md-progress-circular>
+ * </hljs>
+ */
+function MdProgressCircularDirective($mdConstant, $mdTheming) {
+  return {
+    restrict: 'E',
+    template:
+        // The progress 'circle' is composed of two half-circles: the left side and the right
+        // side. Each side has CSS applied to 'fill-in' the half-circle to the appropriate progress.
+        '<div class="md-spinner-wrapper">' +
+          '<div class="md-inner">' +
+            '<div class="md-gap"></div>' +
+            '<div class="md-left">' +
+              '<div class="md-half-circle"></div>' +
+            '</div>' +
+            '<div class="md-right">' +
+              '<div class="md-half-circle"></div>' +
+            '</div>' +
+          '</div>' +
+        '</div>',
+    compile: compile
+  };
+
+  function compile(tElement) {
+    // The javascript in this file is mainly responsible for setting the correct aria attributes.
+    // The animation of the progress spinner is done entirely with just CSS.
+    tElement.attr('aria-valuemin', 0);
+    tElement.attr('aria-valuemax', 100);
+    tElement.attr('role', 'progressbar');
+
+    return postLink;
+  }
+
+  function postLink(scope, element, attr) {
+    $mdTheming(element);
+    var circle = element[0];
+
+    // Scale the progress circle based on the default diameter.
+    var diameter = attr.mdDiameter || 48;
+    var scale = diameter / 48;
+    circle.style[$mdConstant.CSS.TRANSFORM] = 'scale(' + scale + ')';
+
+    attr.$observe('value', function(value) {
+      var percentValue = clamp(value);
+      element.attr('aria-valuenow', percentValue);
+    });
+  }
+
+  /**
+   * Clamps the value to be between 0 and 100.
+   * @param {number} value The value to clamp.
+   * @returns {number}
+   */
+  function clamp(value) {
+    return Math.max(0, Math.min(value || 0, 100));
+  }
+}
+MdProgressCircularDirective.$inject = ["$mdConstant", "$mdTheming"];
+
+})(window, window.angular);

IonicMaterialDesign/www/lib/angular-material/modules/js/progressCircular/progressCircular.min.js

@@ -0,0 +1,7 @@
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v0.10.0
+ */
+!function(a,i,r){"use strict";function e(a,i){function r(a){return a.attr("aria-valuemin",0),a.attr("aria-valuemax",100),a.attr("role","progressbar"),e}function e(r,e,n){i(e);var d=e[0],s=n.mdDiameter||48,c=s/48;d.style[a.CSS.TRANSFORM]="scale("+c+")",n.$observe("value",function(a){var i=t(a);e.attr("aria-valuenow",i)})}function t(a){return Math.max(0,Math.min(a||0,100))}return{restrict:"E",template:'<div class="md-spinner-wrapper"><div class="md-inner"><div class="md-gap"></div><div class="md-left"><div class="md-half-circle"></div></div><div class="md-right"><div class="md-half-circle"></div></div></div></div>',compile:r}}i.module("material.components.progressCircular",["material.core"]).directive("mdProgressCircular",e),e.$inject=["$mdConstant","$mdTheming"]}(window,window.angular);