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

Spinners / loaders

Saad Rehman answered on September 13, 2022 Popularity 10/10 Helpfulness 2/10

answer Spinners / loaders

related Classic spinners / loaders

Spinners / loaders

Comment

<div class="spinner-1"></div>
<div class="spinner-2"></div>
<div class="spinner-3"></div>
<div class="spinner-4"></div>
<div class="spinner-5"></div>
<div class="spinner-6"></div>
<div class="spinner-7"></div>
<div class="spinner-8"></div>
<div class="spinner-9"></div>
<div class="spinner-10"></div>

//css

.spinner-1 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid;
  border-color: #000 #0000;
  animation: s1 1s infinite;
}
@keyframes s1 {to{transform: rotate(.5turn)}}

.spinner-2 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid lightblue;
  border-right-color: orange;
  animation: s2 1s infinite linear;
}
@keyframes s2 {to{transform: rotate(1turn)}}

.spinner-3 {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: s3 1s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}}

.spinner-4 {
  width: 50px;
  --b: 8px; /* the border thickness */
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#f03355) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:s4 1s infinite steps(10);
}
@keyframes s4 {to{transform: rotate(1turn)}}

.spinner-5 {
  width: 50px;
  --b: 8px; /* the border thickness */
  aspect-ratio: 1;
  border-radius: 50%;
  background: #514b82;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: s5 1s infinite;
}
@keyframes s5 {to{transform: rotate(.5turn)}}

.spinner-6 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background: 
    radial-gradient(farthest-side,#ffa516 95%,#0000) 50% 0/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 5px),#ffa516 calc(100% - 4px)) content-box;
  animation: s6 2s infinite ;
}
@keyframes s6 {to{transform: rotate(1turn)}}

.spinner-7 {
  width: 50px;
  aspect-ratio: 1;
  --_c: radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--_c) top,
    var(--_c) left,
    var(--_c) right,
    var(--_c) bottom;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: s7 1s infinite;
}
@keyframes s7 {to{transform: rotate(.5turn)}}

.spinner-8 {
  width: 50px;
  aspect-ratio: 1;
  color: #f03355;
  --_c: no-repeat radial-gradient(farthest-side,currentColor 92%,#0000);
  background: 
    var(--_c) 50% 0   /12px 12px,
    var(--_c) 50% 100%/12px 12px,
    var(--_c) 100% 50%/12px 12px,
    var(--_c) 0    50%/12px 12px,
    var(--_c) 50%  50%/12px 12px,
    conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0)
    -4px -4px/calc(50% + 2px) calc(50% + 2px);
  animation: s8 1s infinite linear;
}
@keyframes s8 {to{transform: rotate(.5turn)}}

.spinner-9 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#f03355 95%,#0000) 50% 1px/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 14px),#ccc 0);
  animation: s9 2s infinite linear;
}
@keyframes s9 {to{transform: rotate(1turn)}}

.spinner-10 {
  width: 50px;
  aspect-ratio: 1;
  color: #854f1d;
  border-radius: 50%;
  display: grid;
  background: 
    conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0)
    -4px -4px/calc(50% + 2px) calc(50% + 2px),
    radial-gradient(farthest-side,currentColor 6px,#0000 7px calc(100% - 6px),currentColor calc(100% - 5px)) no-repeat;
  animation: s10 2s infinite linear;
  position: relative;
}
.spinner-10:before {
  content: "";
  border-radius: inherit;
  background: inherit;
  transform: rotate(45deg);
}
@keyframes s10 {to{transform: rotate(.5turn)}}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Saad Rehman

0 Answers Avg Quality 2/10

Closely Related Answers

Classic spinners / loaders

Comment

<div class="classic-1"></div>
<div class="classic-2"></div>
<div class="classic-3"></div>
<div class="classic-4"></div>
<div class="classic-5"></div>
<div class="classic-6"></div>
<div class="classic-7"></div>
<div class="classic-8"></div>
<div class="classic-9"></div>
<div class="classic-10"></div>


//css

[class*=classic]:before {
  content:"Loading...";
}

.classic-1 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  animation:c1 1s linear infinite alternate;
}
@keyframes c1 {to{opacity: 0}}

.classic-2 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding-bottom: 8px;
  background:linear-gradient(currentColor 0 0) bottom left/0% 3px no-repeat;
  animation:c2 2s linear infinite;
}
@keyframes c2 {to{background-size: 100% 3px}}

.classic-3 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding:0 5px 8px 0;
  background:repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 200% 100%/200% 3px no-repeat;
  animation:c3 2s steps(6) infinite;
}
@keyframes c3 {to{background-position: 80% 100%}}

.classic-4 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  clip-path: inset(0 3ch 0 0);
  animation:c4 1s steps(4) infinite;
}
@keyframes c4 {to{clip-path: inset(0 -1ch 0 0)}}

.classic-5 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  clip-path: inset(0 100% 0 0);
  animation:c5 2s steps(11) infinite;
}
@keyframes c5 {to{clip-path: inset(0 -1ch 0 0)}}

.classic-6 {
  --c:#000;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  overflow:hidden;
  text-shadow:0 0 var(--c),11ch 0 var(--c);
  animation:c6 2s infinite linear;
}
@keyframes c6 {to{text-shadow:-11ch 0 var(--c),0ch 0 var(--c)}}

.classic-7 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  background:linear-gradient(90deg,red calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:c7 2s infinite steps(11);
}
@keyframes c7 {to{background-position: left}}

.classic-8 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  background:linear-gradient(90deg,#000 calc(50% - 0.5ch),red 0 calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:c8 2s infinite steps(11);
}
@keyframes c8 {to{background-position: left}}


.classic-9 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  overflow:hidden;
  animation:c9 5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes c9 {
  0%  {text-shadow: 0    0 #000, 11ch 0 green, 22ch 0 red, 33ch 0 blue,44ch 0 #000}
  25% {text-shadow:-11ch 0 #000,  0ch 0 green, 11ch 0 red, 22ch 0 blue,33ch 0 #000}
  50% {text-shadow:-22ch 0 #000,-11ch 0 green,  0ch 0 red, 11ch 0 blue,22ch 0 #000}
  75% {text-shadow:-33ch 0 #000,-22ch 0 green,-11ch 0 red,  0ch 0 blue,11ch 0 #000}
  100%{text-shadow:-44ch 0 #000,-33ch 0 green,-22ch 0 red,-11ch 0 blue, 0ch 0 #000}
}

.classic-10 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color:#0000;
  background: linear-gradient(90deg,#000 25%,green 0 50%,red 0 75%,blue 0) 0 0/400% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:c10 5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes c10 {
  25% {background-position: calc(1*100%/3) 0}
  50% {background-position: calc(2*100%/3) 0}
  75% {background-position: calc(3*100%/3) 0}
  100%{background-position: calc(4*100%/3) 0}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

Popularity 3/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Saad Rehman

0 Answers Avg Quality 2/10

Spinners / loaders

Contents

More Related Answers

Spinners / loaders

Closely Related Answers

Classic spinners / loaders

Grepper

Documentation

Social

Legal

Contact

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