SCSS Spinner Animation using PURE CSS

Simple animation to replace .GIF images for Spinners and Loaders.


Here you go for the code using single class for a DIV tag


Here is the list of Code written in SCSS (Symantic CSS)

$circleDiam: 20px; $innerCircleDiam: $circleDiam/3; $rotatingCircleDiam: $circleDiam/5; $innerCirclePos: ($circleDiam - $innerCircleDiam)/2; $rotatingCirclePosLeft: ($circleDiam - $innerCircleDiam)/2 - $rotatingCircleDiam; $rotatingCirclePosTop: $circleDiam/2 - $rotatingCircleDiam/2; .spinner { text-indent: 999em; width: $circleDiam; height: $circleDiam; position: fixed; top: 50%; left: 50%; margin: -$circleDiam/2; background-color: #888; box-shadow: 0 2px 1px rgba(0,0,0,.3) inset; border-radius: 50%; &:after { content: ''; position: absolute; top: $rotatingCirclePosTop; left: $rotatingCirclePosLeft; background-color: #fff; height: $rotatingCircleDiam; width: $rotatingCircleDiam; animation: spin 1s linear infinite; border-radius: 50%; transform-origin: $innerCirclePos/2 + $rotatingCircleDiam; } } @keyframes spin { 100% { transform: rotate(360deg); } }