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

Infinity Spinners / loaders

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

answer Infinity Spinners / loaders

Infinity Spinners / loaders

Comment

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

//css

.infinity-1 {
  width:90px;
  height:14px;
  background: repeating-linear-gradient(90deg, currentColor 0 calc(25% - 5px),#0000 0 25%) left/calc(4*100%/3) 100%;
  animation:i1 0.5s infinite linear;
}
@keyframes i1 {
    100% {background-position: right}
}

.infinity-2 {
  width:90px;
  height:14px;
  background: radial-gradient(circle closest-side, currentColor 92%,#0000 ) calc(100%/3) 0/calc(100%/4) 100%;
  animation:i2 0.5s infinite linear;
}
@keyframes i2 {
    100% {background-position: 0 0}
}

.infinity-3 {
  width:calc(80px / 0.707); /* 0.707 = cos(45deg) */
  height:14px;
  background: repeating-linear-gradient(-45deg, currentColor 0 15px,#0000 0 20px) left/200% 100%;
  animation:i3 2s infinite linear;
}
@keyframes i3 {
    100% {background-position:right}
}


.infinity-4 {
  width:calc(80px / 0.707);
  height:14px;
  background: 
    repeating-linear-gradient(135deg, currentColor 0 15px,#0000 0 20px) left top,
    repeating-linear-gradient( 45deg, currentColor 0 15px,#0000 0 20px) left bottom;
  background-size:  200% 50%;
  background-repeat: no-repeat;
  animation:i4 2s infinite linear;
}
@keyframes i4 {
    100% {background-position:top right,bottom right}
}

.infinity-5 {
  width:90px;
  height:14px;
  background: 
    radial-gradient(circle 10px at right 7px top 50%,#0000 92%,currentColor),
    radial-gradient(circle 10px at right 0   top 50%,currentColor 92%,#0000);
  background-size: calc(100%/3) 100%; 
  background-position: 50% 0%;
  animation:i5 .5s infinite linear;
}
@keyframes i5 {
    100% {background-position: 0% 0%}
}

.infinity-6 {
  width:90px;
  height:14px;
  background: 
    conic-gradient(from   45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
    conic-gradient(from -135deg at             7px  50%,currentColor 90deg,#0000 0);
  background-position: calc(100%/3) 0;
  background-size:calc(100%/4) 100%;
  animation:i6 0.5s infinite linear;
}
@keyframes i6 {
    100% {background-position: 0 0}
}

.infinity-7 {
  width:90px;
  height:14px;
  background: 
    linear-gradient(90deg,currentColor 50%,#0000 0) repeat-x,
    conic-gradient(from 45deg at right 7px top  50%,currentColor 90deg,#0000 0);
  background-position: calc(100%/3) 50%;
  background-size:calc(100%/4) 60%,calc(100%/4) 100%;
  animation:i7 0.5s infinite linear;
}
@keyframes i7 {
    100% {background-position: 0 50%}
}
.infinity-8 {
  width:90px;
  height:12px;
  background: 
    linear-gradient(90deg ,currentColor 50%,#0000 0) 0 0%,
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0 50%,
    linear-gradient(90deg ,currentColor 50%,#0000 0) 0 100%;
  background-size: 8px calc(100%/3);
  background-repeat: repeat-x;
  animation:i8 .25s infinite linear;
}
@keyframes i8 {
    100% {background-position: -8px 0%,-8px 50%,-8px 100%}
}

.infinity-9 {
  width:90px;
  height:14px;
  background: 
    linear-gradient(90deg,#0000 16px, currentColor 0 30px, #0000 0),
    radial-gradient(circle closest-side at 68% 50%, currentColor 92%,#0000),
    conic-gradient(from   45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
    conic-gradient(from -135deg at             7px  50%,currentColor 90deg,#0000 0);
  background-position: 0 0;
  background-size:calc(3*100%/4) 100%;
  background-repeat: repeat-x;
  animation:i9 2s infinite linear;
}
@keyframes i9 {
    100% {background-position: -300% 0}
}

.infinity-10 {
  width:90px;
  height:12px;
  background: 
    linear-gradient( 90deg,currentColor 50%,#0000 0) 0 0%,
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0%;
  background-size: 20px 100%;
  background-repeat: repeat-x;
  animation:i10 1s infinite linear;
}
@keyframes i10 {
    100% {background-position: -20px 0%,20px 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 2/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html infinity

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Saad Rehman

0 Answers Avg Quality 2/10

Infinity Spinners / loaders

Contents

More Related Answers

Infinity Spinners / loaders

Grepper

Documentation

Social

Legal

Contact

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