dijit/themes/claro/ProgressBar.css

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

/* ProgressBar
 * 
 * Styling of the ProgressBar consists of the following:
 * 
 * 1. the base progress bar
 *		.dijitProgressBar -	sets margins for the progress bar
 *
 * 2. the empty bar
 *		.dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
 *		Also sets border color for whole bar
 *
 * 3. tile mode
 * 		.dijitProgressBarTile
 *		inner container for finished portion when in 'tile' (image) mode 
 * 	
 * 4. full bar mode
 * 		.dijitProgressBarFull
 *		adds border to right side of the filled portion of bar
 *
 * 5. text for label of  bar
 *		.dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
 * 	
 * 6. indeterminate mode
 *		.dijitProgressBarIndeterminate .dijitProgressBarTile 
 * 		sets animated gif for the progress bar in 'indeterminate' mode
 */
.claro .dijitProgressBar {
  margin: 2px 0 2px 0;
}
.claro .dijitProgressBarEmpty {
  /* outer container and background of the bar that's not finished yet*/

  background-color: #ffffff;
  border-color: #759dc0;
}
.claro .dijitProgressBarTile {
  /* inner container for finished portion when in 'tile' (image) mode */

  background-color: #abd6ff;
  background-image: url("images/progressBarFull.png");
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  background-attachment: scroll;
}
.dj_ie6 .claro .dijitProgressBarTile {
  background-image: none;
}
.claro .dijitProgressBarFull {
  border: 0px solid #759dc0;
  border-right-width: 1px;
  -webkit-transition-property: width;
  -moz-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  transition-duration: 0.25s;
}
.claro .dijitProgressBarLabel {
  /* Set to a color that contrasts with both the "Empty" and "Full" parts. */

  color: #000000;
}
.claro .dijitProgressBarIndeterminate .dijitProgressBarTile {
  /* use an animated gif for the progress bar in 'indeterminate' mode;
		background-color won't appear unless user has turned off background images */

  background: #efefef url("images/progressBarAnim.gif") repeat-x top;
}