Four directions of the HTML5 progress bar in Reader.

progressbar.sass

@import "arkui/mixins"

$bgColor = #d8d6ce
$pollyfill = #855b5b

#reading-progress
  z-index: 1000
  position: fixed
  display: none

  &.pos-top
  &.pos-right
  &.pos-bottom
  &.pos-left
    display: block

  &.pos-top
    top: 0
    left: 0

  &.pos-right
    top: 0
    right: 0
    transform-origin: 100% 50%
    transform: rotate(90deg) translate(50%, 50%)

  &.pos-bottom
    bottom: 0
    left: 0

  &.pos-left
    top: 0
    left: 0
    transform-origin: 0 50%
    transform: rotate(90deg) translate(50%, 50%)

#reading-progress
#reading-progress[role]
  appearance: none
	-moz-appearance: none
	-webkit-appearance: none
	border: none
	background-size: auto
	width: 100%
	height: 5px
	
#reading-progress[role]:after
	background-image: none

#reading-progress[role] strong
	display: none

#reading-progress,
#reading-progress[role][aria-valuenow] {
  background: $bgColor !important
}

#reading-progress::-webkit-progress-bar {
  background: $bgColor
}

#reading-progress {
  color: $pollyfill
}

#reading-progress::-moz-progress-bar {
  background-color: $pollyfill
}

#reading-progress::-webkit-progress-value {
  background-color: $pollyfill
}

#reading-progress[aria-valuenow]:before {
  background-color: $pollyfill
}