Add information on progress bars (#305)

src/main/resources/io/jenkins/plugins/designlibrary/Progress/index.jelly

@@ -1,7 +1,7 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:l="/lib/layout" xmlns:f="/lib/form" xmlns:st="jelly:stapler">
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:l="/lib/layout" xmlns:f="/lib/form" xmlns:t="/lib/hudson" xmlns:st="jelly:stapler">
   <s:sample>
-    <p class="jdl-paragraph">${%title}</p>
+    <p class="jdl-paragraph">${%spinner.description}</p>
 
     <div class="jdl-component-group">
       <div class="jdl-component-sample">
@@ -17,13 +17,31 @@
       <s:code language="xml" file="spinnerLabel.jelly" />
     </div>
 
+    <p class="jdl-paragraph">${%progressAnimation.description}</p>
+
     <div class="jdl-component-group">
       <div class="jdl-component-sample">
         <l:progressAnimation />
       </div>
       <s:code language="xml" file="progressAnimation.jelly" />
     </div>
 
+    <p class="jdl-paragraph">${%progressBar.description}</p>
+
+    <div class="jdl-component-group">
+      <div class="jdl-component-sample">
+        <t:progressBar pos="50" />
+      </div>
+      <s:code language="xml" file="progressBar.jelly" />
+    </div>
+
+    <div class="jdl-component-group">
+      <div class="jdl-component-sample">
+        <t:progressBar pos="-1" />
+      </div>
+      <s:code language="xml" file="progressBarIndeterminate.jelly" />
+    </div>
+
     <h2 class="jdl-heading">${%progressiveRendering}</h2>
     <p class="jdl-paragraph">${%progressiveRendering.description}</p>
     <j:set var="number" value="${request.getParameter('number')}"/>

src/main/resources/io/jenkins/plugins/designlibrary/Progress/index.properties

@@ -1,5 +1,6 @@
-title=There are two components used to indicate progress to the user. Spinner is used \
-to show the user something is happening. Progress animation is used to show something is not complete (such as a log).
+spinner.description=Use the spinner component to display progress for short operations, such as loading a page or card.
+progressAnimation.description=Use the progress animation component for indeterminate operations, such as displaying logs.
+progressBar.description=Use the progress bar component to display progress for long operations, such as building a job.
 progressiveRendering=Progressive rendering
 progressiveRendering.description=Shows how to do a complex operation on the server while displaying its progress, before displaying to the user.
 description.adjuncts=Below, you can find the sample for the adjunct to include. More information about adjuncts can be found \

src/main/resources/io/jenkins/plugins/designlibrary/Progress/index_fr.properties

@@ -1,3 +1,2 @@
-title=Il y a deux composants utilis\u00e9s pour indiquer la progression de l''utilisateur. "Spinner" est utilis\u00e9 pour montrer \u00e0 l''utilisateur que quelque chose se passe. L''animation de progression est utilis\u00e9e pour afficher que quelque chose n''est pas termin\u00e9 (comme un journal).
 progressiveRendering=Rendu progressif
 progressiveRendering.description=Affiche comment effectuer une op\u00e9ration complexe sur le serveur tout en affichant sa progression, avant de l''afficher \u00e0 l''utilisateur.

src/main/resources/io/jenkins/plugins/designlibrary/Progress/index_zh.properties

@@ -1,3 +1,2 @@
-title=\u6709\u4e24\u4e2a\u7ec4\u4ef6\u7528\u4e8e\u5411\u7528\u6237\u663e\u793a\u8fdb\u5ea6\u3002\u65cb\u8f6c\u5668\u7528\u4e8e\u5411\u7528\u6237\u663e\u793a\u6b63\u5728\u53d1\u751f\u7684\u4e8b\u60c5\u3002 \u8fdb\u5ea6\u52a8\u753b\u7528\u4e8e\u663e\u793a\u4e0d\u5b8c\u6574\u7684\u5185\u5bb9(\u4f8b\u5982\u65e5\u5fd7)\u3002
 progressiveRendering=\u6e10\u8fdb\u5f0f\u6e32\u67d3
 progressiveRendering.description=\u663e\u793a\u5982\u4f55\u5728\u670d\u52a1\u5668\u4e0a\u6267\u884c\u590d\u6742\u64cd\u4f5c\uff0c\u540c\u65f6\u663e\u793a\u8fdb\u5ea6, \u7136\u540e\u518d\u5411\u7528\u6237\u663e\u793a.

src/main/webapp/Progress/progressBar.jelly

@@ -0,0 +1 @@
+<t:progressBar pos="50" />

src/main/webapp/Progress/progressBarIndeterminate.jelly

@@ -0,0 +1 @@
+<t:progressBar pos="-1" />