Breaking News: Grepper is joining You.com. Read the official announcement!

How to add a pure css loading spinner

Stefano answered on June 9, 2021 Popularity 9/10 Helpfulness 2/10

answer How to add a pure css loading spinner

related pure css spinner

How to add a pure css loading spinner

Comment

.loader {
  width: 100%;
  margin: 50px auto;
  align-items: center;
  border: 7px solid #f3f3f3; /* Light grey */
  border-top: 7px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loader"></div>

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: add css loading pure-css spinner

Link to this answer
Share Copy Link

Contributed on Jan 31 2022

Stefano

0 Answers Avg Quality 2/10

Closely Related Answers

pure css spinner

Comment

#loading {
  display: inline-block;
    width: 150px;
    height: 150px;
    border: 5px solid rgb(26 108 97 / 54%);
    border-radius: 50%;
    border-top-color: #fff0;
    animation: spin 1s ease-in infinite; /*use cubic-bezier(0,0,0,0) for smooth spin*/
    -webkit-animation: spin 1s ease-in-out infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    translate: -50% -50%;
}

@keyframes spin {to {-webkit-transform: rotate(360deg);}}
@-webkit-keyframes spin {to {-webkit-transform: rotate(360deg);}}

Popularity 7/10 Helpfulness 7/10 Language css

Source: codepen.io

Tags: css pure-css spinner

Link to this answer
Share Copy Link

Contributed on Oct 28 2022

Fahim Foysal

0 Answers Avg Quality 2/10

pure css spinner

Comment

rotationBack

Popularity 8/10 Helpfulness 1/10 Language css

Source: codepen.io

Tags: spinner css pure-css

Link to this answer
Share Copy Link

Contributed on Jun 09 2021

Annoying Anteater

0 Answers Avg Quality 2/10

How to add a pure css loading spinner

Contents

More Related Answers

How to add a pure css loading spinner

Closely Related Answers

pure css spinner

pure css spinner

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.