| <!DOCTYPE html> |
| <!-- |
| @WAIT-FOR:Ready |
| @EXECUTE-AND-WAIT-FOR:setProgressThirty() |
| @EXECUTE-AND-WAIT-FOR:setProgressSeventy() |
| @EXECUTE-AND-WAIT-FOR:setProgressFull() |
| @AURALINUX-ALLOW:indeterminate* |
| @BLINK-ALLOW:htmlTag* |
| @BLINK-ALLOW:className* |
| --> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Material Web Progress</title> |
| <script type="module"> |
| import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js"; |
| injectImportMap(); |
| |
| const components = [ |
| "md-linear-progress", |
| "md-circular-progress" |
| ]; |
| |
| loadAndWaitForReady(components, () => { |
| const statusDiv = document.getElementById("status"); |
| const linearProgresses = [ |
| { id: "test-progress" }, |
| { value: 0.5 }, |
| { value: 0.6, buffer: 0.8 }, |
| { indeterminate: true } |
| ]; |
| linearProgresses.forEach(progressInfo => { |
| const progress = document.createElement("md-linear-progress"); |
| if (progressInfo.id) { |
| progress.id = progressInfo.id; |
| } |
| if (progressInfo.value) { |
| progress.value = progressInfo.value; |
| } |
| if (progressInfo.buffer) { |
| progress.buffer = progressInfo.buffer; |
| } |
| if (progressInfo.indeterminate) { |
| progress.indeterminate = true; |
| } |
| statusDiv.appendChild(progress); |
| }); |
| |
| const circularProgresses = [ |
| {}, |
| { value: 0.3 }, |
| { indeterminate: true }, |
| { fourColor: true } |
| ]; |
| circularProgresses.forEach(progressInfo => { |
| const progress = document.createElement("md-circular-progress"); |
| if (progressInfo.value) { |
| progress.value = progressInfo.value; |
| } |
| if (progressInfo.indeterminate) { |
| progress.indeterminate = true; |
| } |
| if (progressInfo.fourColor) { |
| progress.fourColor = true; |
| } |
| statusDiv.appendChild(progress); |
| }); |
| |
| statusDiv.setAttribute("aria-label", "Ready"); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="status" aria-label="Loading"> |
| </div> |
| </body> |
| <script> |
| async function setProgressThirty() { |
| const progress = document.getElementById("test-progress"); |
| if (progress) { |
| progress.value = 0.3; |
| await progress.updateComplete; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Progress Set to 30"; |
| statusDiv.appendChild(statusText); |
| return "Progress Set to 30"; |
| } |
| return "Failed to set Progress to 30"; |
| } |
| |
| async function setProgressSeventy() { |
| const progress = document.getElementById("test-progress"); |
| if (progress) { |
| progress.value = 0.7; |
| await progress.updateComplete; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Progress Set to 70"; |
| statusDiv.appendChild(statusText); |
| return "Progress Set to 70"; |
| } |
| return "Failed to set Progress to 70"; |
| } |
| |
| async function setProgressFull() { |
| const progress = document.getElementById("test-progress"); |
| if (progress) { |
| progress.value = 1.0; |
| await progress.updateComplete; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Progress Set to 100"; |
| statusDiv.appendChild(statusText); |
| return "Progress Set to 100"; |
| } |
| return "Failed to set Progress to 100"; |
| } |
| </script> |
| </html> |
