Skip to content

Instantly share code, notes, and snippets.

@mockee
Last active December 15, 2015 12:29
Show Gist options
  • Save mockee/5260999 to your computer and use it in GitHub Desktop.
Save mockee/5260999 to your computer and use it in GitHub Desktop.
Four directions of the HTML5 progress bar in Reader.
@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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment