Menu ▼



Posted By :
avatarDesignIsBack
Total Views : 1209

SCSS Spinner Animation using PURE CSS

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

Output:

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

   <div class="spinner">Loading...</div>

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); }
}





comments powered by Disqus


Search dotnetlearners.com