fgnass / spin.js

A spinning activity indicator
http://spin.js.org
MIT License
9.3k stars 1.02k forks source link

Add support for custom box-shadow values with corrected positioning #346

Closed theodorejb closed 6 years ago

theodorejb commented 6 years ago

Directly applying a box-shadow to the spinner lines would cause the shadow to be rotated along with the lines, which doesn't look natural. Previously, this was avoided by generating another element for each line, coloring it black and applying a black box-shadow, and then positioning it down a couple pixels beneath the line. However, this approach didn't allow customization of the shadow position and color, and also blocked use of inset shadows or multiple blended shadows with different positions.

This commit solves these issues by parsing a standard box-shadow value to determine its x and y offsets, and then using trigonometry to correct the shadow coordinates for each line based on its degrees of rotation.

Resolves #35.

theodorejb commented 6 years ago

Here are examples of how several standard box-shadow values will be rendered: