third_party/polymer/components/paper-progress/demo.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components/paper-progress/demo.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

OLD	NEW
	(Empty)
1 <!--

2 @license

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polym er.github.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS .txt

6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt

9 -->

10 <!doctype html>

11 <html>

12 <head>

13 <title>paper-progress</title>

14

15 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">

16 <meta name="mobile-web-app-capable" content="yes">

17 <meta name="apple-mobile-web-app-capable" content="yes">

18

19 <script src="../webcomponentsjs/webcomponents.js"></script>

20

21 <link rel="import" href="paper-progress.html">

22 <link rel="import" href="../paper-button/paper-button.html">

23

24 <style shim-shadowdom>

25

26 body {

27 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;

28 margin: 0;

29 padding: 24px;

30 }

31

32 paper-progress {

33 display: block;

34 width: 100%;

35 padding: 25px 0;

36 }

37

38 paper-progress.pink::shadow #activeProgress {

39 background-color: #e91e63;

40 }

41

42 paper-progress.pink::shadow #secondaryProgress {

43 background-color: #f8bbd0;

44 }

45

46 </style>

47

48 </head>

49 <body unresolved>

50

51 <paper-progress></paper-progress>

52

53 <paper-button raised onclick="startProgress();">Start</paper-button>

54

55 <br><br><br>

56

57 <paper-progress></paper-progress><br>

58

59 <paper-progress value="40"></paper-progress><br>

60

61 <paper-progress value="800" min="100" max="1000"></paper-progress><br>

62

63 <paper-progress value="40" secondaryProgress="80"></paper-progress><br>

64

65 <paper-progress value="200" max="200"></paper-progress><br>

66

67 <paper-progress indeterminate></paper-progress><br>

68

69 <paper-progress class="pink" value="80"></paper-progress><br>

70

71 <paper-progress class="pink" value="40" secondaryProgress="80"></paper-progres s><br>

72

73 <paper-progress class="pink" indeterminate></paper-progress><br>

74

75 <script>

76

77 var progress = document.querySelector('paper-progress');

78 var button = document.querySelector('paper-button');

79

80 var repeat, maxRepeat = 5, animating = false;

81

82 function nextProgress() {

83 animating = true;

84 if (progress.value < progress.max) {

85 progress.value += (progress.step \|\| 1);

86 } else {

87 if (++repeat >= maxRepeat) {

88 animating = false;

89 button.disabled = false;

90 return;

91 }

92 progress.value = progress.min;

93 }

94 progress.async(nextProgress);

95 }

96

97 function startProgress() {

98 repeat = 0;

99 progress.value = progress.min;

100 button.disabled = true;

101 if (!animating) {

102 nextProgress();

103 }

104 }

105

106 addEventListener('polymer-ready', function() {

107 startProgress();

108 });

109

110 </script>

111

112 </body>

113 </html>

OLD	NEW