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

Continuous spinners / loaders

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

answer Continuous spinners / loaders

Continuous spinners / loaders

Comment

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

//css

.continuous-1 {
  width: 120px;
  height:20px;
  background: 
    linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
    #f2f2f2;
  background-size:300% 100%;
  animation: ct1 1s infinite linear;
}

@keyframes ct1 {
  0% {background-position: right}
}


.continuous-2 {
  width: 120px;
  height: 20px;
  background: 
    linear-gradient(90deg, #0000 ,orange) left -50px top 0/50px 20px no-repeat 
    lightblue;
  animation: ct2 1s infinite linear;
}

@keyframes ct2 {
  100% {background-position: right -50px top 0}
}

.continuous-3 {
  width: 120px;
  height: 20px;
  transform: skewX(-45deg);
  background: 
    linear-gradient(#f03355 0 0) left -30px top 0/30px 20px no-repeat 
    #ccc;
  animation: ct3 1s infinite linear;
}

@keyframes ct3 {
  100% {background-position: right -30px top 0}
}

.continuous-4 {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: #514b82;
  border: 2px solid;
  position: relative;
  overflow: hidden;
}

.continuous-4::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: currentColor;
  box-shadow: -10px 0 12px 3px currentColor;
  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
  animation: ct4 1s infinite linear;
}

@keyframes ct4 {
  100% {left: calc(100% + 20px)}
}

.continuous-5 {
    width: 120px;
    height: 20px;
    background: 
      linear-gradient(#25b09b 0 0) left -40px top 0/40px 20px,
      linear-gradient(#ddd 0 0) center/100% 50%; 
    background-repeat: no-repeat;
    animation: ct5 1s infinite linear;
}

@keyframes ct5 {
  100% {background-position: right -40px top 0,center}
}

.continuous-6 {
    width: 120px;
    height: 20px;
    background: 
      radial-gradient(circle 10px,#000 95%,#0000 )  right /calc(200% + 20px) 100%,
      linear-gradient(#000 0 0) center/100% 6px; 
    background-repeat: no-repeat; 
    -webkit-mask: radial-gradient(circle 4px,#0000 93%,#000 ) right/calc(200% + 20px) 100%;
    animation: ct6 1s infinite linear;
}

@keyframes ct6 {
  100% {background-position: left;-webkit-mask-position:left}
}

.continuous-7 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
  background:
   linear-gradient(#000 0 0) left -25% top 0 /20% 100% no-repeat
   #ddd;
  animation:ct7 1s infinite steps(6);
}
@keyframes ct7 {
    100% {background-position: right -25% top 0}
}

.continuous-8 {
    width: 40px;
    height: 40px;
    background:
      linear-gradient(to bottom right,#0000 calc(50% - 40px),#fff 50%,#0000 calc(50% + 40px)) 
      bottom right/calc(200% + 80px) calc(200% + 80px) 
      orange;
    animation: ct8 1s infinite ;
}
@keyframes ct8 {
    100% {background-position: top left}
}

.continuous-9 {
    width: 120px;
    height: 20px;
    background: 
      radial-gradient(circle closest-side,#f03355 94%,#0000) 50% 50%/calc(50% + 10px) 70% repeat-x 
      #ccc;
    animation: ct9 1s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes ct9 {
  100% {background-position: calc(200% - 5px)}
}

.continuous-10 {
    width: 120px;
    height: 20px;
    background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
    -webkit-mask:
      linear-gradient(#000 0 0) top   /100% 5px no-repeat,
      linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
      repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
    animation: ct10 1s infinite linear;
}

@keyframes ct10 {
  100% {background-position: right -40px top 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 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: continuous html

Link to this answer
Share Copy Link

Contributed on Sep 13 2022

Saad Rehman

0 Answers Avg Quality 2/10

Continuous spinners / loaders

Contents

More Related Answers

Continuous spinners / loaders

Grepper

Documentation

Social

Legal

Contact

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