Progress Bars

There are currently three progress bar components

1. "progressBar1"
2. "progressBar2"
3. "progressBar3"

Demo of progressBar1

Demo of progressBar2

Demo of progressBar3

Progress Bars Usage

item1: {
  id: 'progressBar1',
  progressColor: '#a4c3f5',
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white",
  bufferedColor: "#B7B7B7"
}

Progress Bar Properties

Property Name	Required	Accepted Values	Description	Default
id	Yes	"progressBar1", "progressBar2", "progressBar3"	Used to render a progressBar.	undefined
barColor	No	Any hex or rgb color code	Changes the background color of the progressBar.	"white"
progressColor	No	Any hex or rgb color code	Changes the color of the progress in the progressBar	"#4ab860"
scrubberColor	No	Any hex or rgb color code	Changes the color of the progressBar scrubber (the circle at the end of the progress).	Same as the progressColor if defined or "white"
scrubberBorderColor	No	Any hex or rgb color code	Changes the border color of the progressBar scrubber.	A lightened version of the scrubberColor
bufferedColor	No	Any hex or rgb color code	Changes the color of the buffered part of the progressBar (the content that is already loaded).	"rgba(0,0,0,0.4)"
hideOnMobile	No	true or false	Hides the progressBar component when the video's width is less than 768px	false
marginLeft	No	A string css value for the marginLeft property, ex: '10px', '10rem'	Changes the left margin of the progressBar	"0"
marginRight	No	A string css value for the marginRight property, ex: '10px', '10rem'	Changes the left margin of the progressBar	"0"

Top Progress Bar

Instead of putting the progress bar in the controls bar, it can be put above the controls bar. This is a good way of saving space in the controls bar.

Demo of topProgressBar

Top Progress Bar Usage

topProgressBar: {
  id: 'progressBar1',
  progressColor: '#a4c3f5',
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white",
  bufferedColor: "#B7B7B7"
}

The topProgressBar has the same properties as seen in the table above.