Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Chapter 10. Custom Controls > 10.2. Progress Bars
10.2. Progress Bars
The preceding section illustrated implementing Canvas-based controls with a simple rounded rectangle. In this section we explore composite controls—meaning controls that contain other controls—with a progress bar that uses a rounded rectangle. Figure 10.5 shows a progress bar in action.
Figure 10.5. A progress bar progressing
The HTML for the application shown in Figure 10.5 is listed in Example 10.4.
The HTML creates the Start button and the loading span. The span is initially invisible, as shown in the top screenshot in Figure 10.5. The HTML also adds a DIV named progressbarDiv to the page.
The HTML loads the JavaScript for the COREHTML5.Progressbar and COREHTML5.RoundedRectangle controls. Because progress bars contain a rounded rectangle, the JavaScript file for the latter is necessary for the former. The HTML also loads the JavaScript for an animation polyfill method named requestNextAnimationFrame(), which is discussed in Section 5.1.3, “A Portable Animation Loop,” on p. 348. That polyfill method drives the progress bar animation.
