One of our essential features is a progress bar that wraps around the outer border of the site window.
To make this, one approach could be to create a background layer that sits behind a rounded main layer, creating the illusion of a rounded border. In order to have the progress bar tick, we would calculate the perimeter using the width and height of the window, and increment the bar based on a percentage of the timer remaining.
Note the small line at the top of the screen which indicates the start of the timer, and the rounded corners of the head of the progress bar. The progress bar moves clockwise.
One of our essential features is a progress bar that wraps around the outer border of the site window.
To make this, one approach could be to create a background layer that sits behind a rounded main layer, creating the illusion of a rounded border. In order to have the progress bar tick, we would calculate the perimeter using the width and height of the window, and increment the bar based on a percentage of the timer remaining.
Note the small line at the top of the screen which indicates the start of the timer, and the rounded corners of the head of the progress bar. The progress bar moves clockwise.