{"action":"created","comment":{"url":"https://api.github.com/repos/angular/material2/pulls/comments/61603692","id":61603692,"diff_hunk":"@@ -41,47 +84,172 @@ export class MdProgressCircle {\n    * mode is bound to the host as the attribute host.\n    */\n   @HostBinding('attr.mode')\n-  @Input() mode: 'determinate' | 'indeterminate' = 'determinate';\n+  @Input()\n+  get mode() {\n+    return this._mode;\n+  }\n+  set mode(m: 'determinate' | 'indeterminate') {\n+    if (m == 'indeterminate') {\n+      this._startIndeterminateAnimation();\n+    } else {\n+      this._cleanupIndeterminateAnimation();\n+    }\n+    this._mode = m;\n+  }\n+  private _mode: 'determinate' | 'indeterminate' = 'determinate';\n+\n+\n+  constructor(ref: ChangeDetectorRef) {\n+    this._ref = ref;\n+  }\n \n \n   /**\n-   * Gets the current stroke dash offset to represent the progress circle.\n-   *\n-   * The stroke dash offset specifies the distance between dashes in the circle's stroke.\n-   * Setting the offset to a percentage of the total circumference of the circle, fills this\n-   * percentage of the overall circumference of the circle.\n+   * Animates the rendered circle.\n    */\n-  strokeDashOffset() {\n-    // To determine how far the offset should be, we multiple the current percentage by the\n-    // total circumference.\n+  private _renderCircle(animateFrom: number, animateTo: number, ease: Function,\n+                        duration: number, rotation: number) {\n+    let id = ++this._lastAnimationId;\n+    let startTime = MdProgressCircle._animationNow();\n+    let changeInValue = animateTo - animateFrom;\n+    let animationDuration = duration || 225;\n+\n+    // No need to animate it if the values are the same\n+    if (animateTo === animateFrom) {\n+      this.currentPath = MdProgressCircle.getSvgArc(animateTo, rotation);\n+    } else {\n+      let animation = (now: number) => {\n+        let elapsedTime = Math.max(\n+          0, Math.min((now || MdProgressCircle._animationNow()) - startTime, animationDuration));\n \n-    // The total circumference is calculated based on the radius we use, 45.\n-    // PI * 2 * 45\n-    return 251.3274 * (100 - this._value) / 100;\n+        this.currentPath = MdProgressCircle.getSvgArc(\n+          ease(elapsedTime, animateFrom, changeInValue, animationDuration),\n+          rotation\n+        );\n+\n+        // Prevent overlapping animations by checking if a new animation has been called for and\n+        // if the animation has lasted long than the animation duration.\n+        if (id === this._lastAnimationId && elapsedTime < animationDuration) {\n+          window.requestAnimationFrame(animation);\n+        }\n+      };\n+      window.requestAnimationFrame(animation);\n+    }\n   }\n \n \n-  /** Gets the progress value, returning the clamped value. */\n-  get value() {\n-    return this._value;\n+  /**\n+   * Starts the indeterminate animation interval, if it is not already running.\n+   */\n+  private _startIndeterminateAnimation() {\n+    var rotationStartPoint = 0;\n+    var start = startIndeterminate;\n+    var end =  endIndeterminate;\n+    var duration = durationIndeterminate;\n+    var animate = () => {\n+      this._renderCircle(start, end, MdProgressCircle.materialEase, duration, rotationStartPoint);\n+      // Prevent rotation from reaching Number.MAX_SAFE_INTEGER.\n+      rotationStartPoint = (rotationStartPoint + end) % 100;\n+      let temp = start;\n+      start = -end;\n+      end = -temp;\n+    };\n+\n+    if (!this._interdeterminateInterval) {\n+      // Note that this interval isn't supposed to trigger a digest.\n+      this._interdeterminateInterval = window.setInterval(\n+        animate, durationIndeterminate + 50, 0, false);\n+      animate();\n+    }\n   }\n \n \n-  /** Sets the progress value, clamping before setting the internal value. */\n-  set value(v: number) {\n-    if (v != null) {\n-      this._value = MdProgressCircle.clamp(v);\n+  /**\n+   * Removes interval, ending the animation.\n+   */\n+  private _cleanupIndeterminateAnimation() {\n+    if (this._interdeterminateInterval) {\n+      window.clearInterval(this._interdeterminateInterval);\n+      this._interdeterminateInterval = null;\n     }\n   }\n \n \n+  /**\n+   * Determines the path value to define the arc.\n+   */\n+  private static getSvgArc(current: number, rotation: number) {\n+    // The angle can't be exactly 360, because the arc becomes hidden.","path":"src/components/progress-circle/progress-circle.ts","position":194,"original_position":194,"commit_id":"edaf1de24e01ada74054086c697f9ac882666cf9","original_commit_id":"edaf1de24e01ada74054086c697f9ac882666cf9","user":{"login":"jelbourn","id":838736,"avatar_url":"https://avatars.githubusercontent.com/u/838736?v=3","gravatar_id":"","url":"https://api.github.com/users/jelbourn","html_url":"https://github.com/jelbourn","followers_url":"https://api.github.com/users/jelbourn/followers","following_url":"https://api.github.com/users/jelbourn/following{/other_user}","gists_url":"https://api.github.com/users/jelbourn/gists{/gist_id}","starred_url":"https://api.github.com/users/jelbourn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jelbourn/subscriptions","organizations_url":"https://api.github.com/users/jelbourn/orgs","repos_url":"https://api.github.com/users/jelbourn/repos","events_url":"https://api.github.com/users/jelbourn/events{/privacy}","received_events_url":"https://api.github.com/users/jelbourn/received_events","type":"User","site_admin":false},"body":"Also need high-level description of what's going on here.","created_at":"2016-04-29T16:19:24Z","updated_at":"2016-04-29T16:19:24Z","html_url":"https://github.com/angular/material2/pull/375#discussion_r61603692","pull_request_url":"https://api.github.com/repos/angular/material2/pulls/375","_links":{"self":{"href":"https://api.github.com/repos/angular/material2/pulls/comments/61603692"},"html":{"href":"https://github.com/angular/material2/pull/375#discussion_r61603692"},"pull_request":{"href":"https://api.github.com/repos/angular/material2/pulls/375"}}},"pull_request":{"url":"https://api.github.com/repos/angular/material2/pulls/375","id":68273444,"html_url":"https://github.com/angular/material2/pull/375","diff_url":"https://github.com/angular/material2/pull/375.diff","patch_url":"https://github.com/angular/material2/pull/375.patch","issue_url":"https://api.github.com/repos/angular/material2/issues/375","number":375,"state":"open","locked":false,"title":"fix(progress-circle): render determinate and indeterminate across all supported browsers","user":{"login":"josephperrott","id":10864441,"avatar_url":"https://avatars.githubusercontent.com/u/10864441?v=3","gravatar_id":"","url":"https://api.github.com/users/josephperrott","html_url":"https://github.com/josephperrott","followers_url":"https://api.github.com/users/josephperrott/followers","following_url":"https://api.github.com/users/josephperrott/following{/other_user}","gists_url":"https://api.github.com/users/josephperrott/gists{/gist_id}","starred_url":"https://api.github.com/users/josephperrott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/josephperrott/subscriptions","organizations_url":"https://api.github.com/users/josephperrott/orgs","repos_url":"https://api.github.com/users/josephperrott/repos","events_url":"https://api.github.com/users/josephperrott/events{/privacy}","received_events_url":"https://api.github.com/users/josephperrott/received_events","type":"User","site_admin":false},"body":"For #295 ","created_at":"2016-04-28T19:06:04Z","updated_at":"2016-04-29T16:19:24Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f3864a62840aca6c9f4f804ffae2d6d98aeb8a1e","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/angular/material2/pulls/375/commits","review_comments_url":"https://api.github.com/repos/angular/material2/pulls/375/comments","review_comment_url":"https://api.github.com/repos/angular/material2/pulls/comments{/number}","comments_url":"https://api.github.com/repos/angular/material2/issues/375/comments","statuses_url":"https://api.github.com/repos/angular/material2/statuses/edaf1de24e01ada74054086c697f9ac882666cf9","head":{"label":"josephperrott:master","ref":"master","sha":"edaf1de24e01ada74054086c697f9ac882666cf9","user":{"login":"josephperrott","id":10864441,"avatar_url":"https://avatars.githubusercontent.com/u/10864441?v=3","gravatar_id":"","url":"https://api.github.com/users/josephperrott","html_url":"https://github.com/josephperrott","followers_url":"https://api.github.com/users/josephperrott/followers","following_url":"https://api.github.com/users/josephperrott/following{/other_user}","gists_url":"https://api.github.com/users/josephperrott/gists{/gist_id}","starred_url":"https://api.github.com/users/josephperrott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/josephperrott/subscriptions","organizations_url":"https://api.github.com/users/josephperrott/orgs","repos_url":"https://api.github.com/users/josephperrott/repos","events_url":"https://api.github.com/users/josephperrott/events{/privacy}","received_events_url":"https://api.github.com/users/josephperrott/received_events","type":"User","site_admin":false},"repo":{"id":51547486,"name":"material2","full_name":"josephperrott/material2","owner":{"login":"josephperrott","id":10864441,"avatar_url":"https://avatars.githubusercontent.com/u/10864441?v=3","gravatar_id":"","url":"https://api.github.com/users/josephperrott","html_url":"https://github.com/josephperrott","followers_url":"https://api.github.com/users/josephperrott/followers","following_url":"https://api.github.com/users/josephperrott/following{/other_user}","gists_url":"https://api.github.com/users/josephperrott/gists{/gist_id}","starred_url":"https://api.github.com/users/josephperrott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/josephperrott/subscriptions","organizations_url":"https://api.github.com/users/josephperrott/orgs","repos_url":"https://api.github.com/users/josephperrott/repos","events_url":"https://api.github.com/users/josephperrott/events{/privacy}","received_events_url":"https://api.github.com/users/josephperrott/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/josephperrott/material2","description":"Material Design components for Angular 2","fork":true,"url":"https://api.github.com/repos/josephperrott/material2","forks_url":"https://api.github.com/repos/josephperrott/material2/forks","keys_url":"https://api.github.com/repos/josephperrott/material2/keys{/key_id}","collaborators_url":"https://api.github.com/repos/josephperrott/material2/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/josephperrott/material2/teams","hooks_url":"https://api.github.com/repos/josephperrott/material2/hooks","issue_events_url":"https://api.github.com/repos/josephperrott/material2/issues/events{/number}","events_url":"https://api.github.com/repos/josephperrott/material2/events","assignees_url":"https://api.github.com/repos/josephperrott/material2/assignees{/user}","branches_url":"https://api.github.com/repos/josephperrott/material2/branches{/branch}","tags_url":"https://api.github.com/repos/josephperrott/material2/tags","blobs_url":"https://api.github.com/repos/josephperrott/material2/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/josephperrott/material2/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/josephperrott/material2/git/refs{/sha}","trees_url":"https://api.github.com/repos/josephperrott/material2/git/trees{/sha}","statuses_url":"https://api.github.com/repos/josephperrott/material2/statuses/{sha}","languages_url":"https://api.github.com/repos/josephperrott/material2/languages","stargazers_url":"https://api.github.com/repos/josephperrott/material2/stargazers","contributors_url":"https://api.github.com/repos/josephperrott/material2/contributors","subscribers_url":"https://api.github.com/repos/josephperrott/material2/subscribers","subscription_url":"https://api.github.com/repos/josephperrott/material2/subscription","commits_url":"https://api.github.com/repos/josephperrott/material2/commits{/sha}","git_commits_url":"https://api.github.com/repos/josephperrott/material2/git/commits{/sha}","comments_url":"https://api.github.com/repos/josephperrott/material2/comments{/number}","issue_comment_url":"https://api.github.com/repos/josephperrott/material2/issues/comments{/number}","contents_url":"https://api.github.com/repos/josephperrott/material2/contents/{+path}","compare_url":"https://api.github.com/repos/josephperrott/material2/compare/{base}...{head}","merges_url":"https://api.github.com/repos/josephperrott/material2/merges","archive_url":"https://api.github.com/repos/josephperrott/material2/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/josephperrott/material2/downloads","issues_url":"https://api.github.com/repos/josephperrott/material2/issues{/number}","pulls_url":"https://api.github.com/repos/josephperrott/material2/pulls{/number}","milestones_url":"https://api.github.com/repos/josephperrott/material2/milestones{/number}","notifications_url":"https://api.github.com/repos/josephperrott/material2/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/josephperrott/material2/labels{/name}","releases_url":"https://api.github.com/repos/josephperrott/material2/releases{/id}","deployments_url":"https://api.github.com/repos/josephperrott/material2/deployments","created_at":"2016-02-11T21:14:39Z","updated_at":"2016-02-11T21:14:40Z","pushed_at":"2016-04-28T19:26:44Z","git_url":"git://github.com/josephperrott/material2.git","ssh_url":"git@github.com:josephperrott/material2.git","clone_url":"https://github.com/josephperrott/material2.git","svn_url":"https://github.com/josephperrott/material2","homepage":"","size":595,"stargazers_count":0,"watchers_count":0,"language":"TypeScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"angular:master","ref":"master","sha":"ca5339bdc9e68d9c7518d1323e8e70a2fc501ae0","user":{"login":"angular","id":139426,"avatar_url":"https://avatars.githubusercontent.com/u/139426?v=3","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"repo":{"id":49016322,"name":"material2","full_name":"angular/material2","owner":{"login":"angular","id":139426,"avatar_url":"https://avatars.githubusercontent.com/u/139426?v=3","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/angular/material2","description":"Material Design components for Angular 2","fork":false,"url":"https://api.github.com/repos/angular/material2","forks_url":"https://api.github.com/repos/angular/material2/forks","keys_url":"https://api.github.com/repos/angular/material2/keys{/key_id}","collaborators_url":"https://api.github.com/repos/angular/material2/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/angular/material2/teams","hooks_url":"https://api.github.com/repos/angular/material2/hooks","issue_events_url":"https://api.github.com/repos/angular/material2/issues/events{/number}","events_url":"https://api.github.com/repos/angular/material2/events","assignees_url":"https://api.github.com/repos/angular/material2/assignees{/user}","branches_url":"https://api.github.com/repos/angular/material2/branches{/branch}","tags_url":"https://api.github.com/repos/angular/material2/tags","blobs_url":"https://api.github.com/repos/angular/material2/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/angular/material2/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/angular/material2/git/refs{/sha}","trees_url":"https://api.github.com/repos/angular/material2/git/trees{/sha}","statuses_url":"https://api.github.com/repos/angular/material2/statuses/{sha}","languages_url":"https://api.github.com/repos/angular/material2/languages","stargazers_url":"https://api.github.com/repos/angular/material2/stargazers","contributors_url":"https://api.github.com/repos/angular/material2/contributors","subscribers_url":"https://api.github.com/repos/angular/material2/subscribers","subscription_url":"https://api.github.com/repos/angular/material2/subscription","commits_url":"https://api.github.com/repos/angular/material2/commits{/sha}","git_commits_url":"https://api.github.com/repos/angular/material2/git/commits{/sha}","comments_url":"https://api.github.com/repos/angular/material2/comments{/number}","issue_comment_url":"https://api.github.com/repos/angular/material2/issues/comments{/number}","contents_url":"https://api.github.com/repos/angular/material2/contents/{+path}","compare_url":"https://api.github.com/repos/angular/material2/compare/{base}...{head}","merges_url":"https://api.github.com/repos/angular/material2/merges","archive_url":"https://api.github.com/repos/angular/material2/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/angular/material2/downloads","issues_url":"https://api.github.com/repos/angular/material2/issues{/number}","pulls_url":"https://api.github.com/repos/angular/material2/pulls{/number}","milestones_url":"https://api.github.com/repos/angular/material2/milestones{/number}","notifications_url":"https://api.github.com/repos/angular/material2/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/angular/material2/labels{/name}","releases_url":"https://api.github.com/repos/angular/material2/releases{/id}","deployments_url":"https://api.github.com/repos/angular/material2/deployments","created_at":"2016-01-04T18:50:02Z","updated_at":"2016-04-29T15:39:45Z","pushed_at":"2016-04-29T15:22:08Z","git_url":"git://github.com/angular/material2.git","ssh_url":"git@github.com:angular/material2.git","clone_url":"https://github.com/angular/material2.git","svn_url":"https://github.com/angular/material2","homepage":"","size":868,"stargazers_count":1785,"watchers_count":1785,"language":"TypeScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":236,"mirror_url":null,"open_issues_count":73,"forks":236,"open_issues":73,"watchers":1785,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/angular/material2/pulls/375"},"html":{"href":"https://github.com/angular/material2/pull/375"},"issue":{"href":"https://api.github.com/repos/angular/material2/issues/375"},"comments":{"href":"https://api.github.com/repos/angular/material2/issues/375/comments"},"review_comments":{"href":"https://api.github.com/repos/angular/material2/pulls/375/comments"},"review_comment":{"href":"https://api.github.com/repos/angular/material2/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/angular/material2/pulls/375/commits"},"statuses":{"href":"https://api.github.com/repos/angular/material2/statuses/edaf1de24e01ada74054086c697f9ac882666cf9"}}}}