CSS Loaders

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   border-radius: 50%;
   border: {{optionone}}px solid;
   border-color: {{secondary}};
   border-right-color: {{primary}};
   animation: {{classname}}-animation {{speed}}s infinite linear;
}

@keyframes {{classname}}-animation {
   to {
      transform: rotate(1turn);
   }
}
</style>

Basic

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   border-radius: 50%;
   background: conic-gradient(#0000 10%,{{primary}});
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
   animation: {{classname}}-animation {{speed}}s infinite linear;
}

@keyframes {{classname}}-animation {
   to {
      transform: rotate(1turn);
   }
}
</style>

Comet

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   border-radius: 50%;
   background: radial-gradient(farthest-side,{{primary}} 94%,#0000) top/9px 9px no-repeat,
          conic-gradient(#0000 30%,{{primary}});
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
   animation: {{classname}}-animation {{speed}}s infinite linear;
}

@keyframes {{classname}}-animation {
   100% {
      transform: rotate(1turn);
   }
}
</style>

Rounded Heart Comet

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   border-radius: 50%;
   border: {{optionone}}px solid {{primary}};
   animation: {{classname}}-animation {{speed}}s infinite linear alternate,
        {{classname}}-animationtwo {{optiontwo}}s infinite linear;
}

@keyframes {{classname}}-animation {
   0% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
   }

   12.5% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
   }

   25% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
   }

   50% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
   }

   62.5% {
      clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
   }

   75% {
      clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
   }

   100% {
      clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
   }
}

@keyframes {{classname}}-animationtwo {
   0% {
      transform: scaleY(1) rotate(0deg);
   }

   49.99% {
      transform: scaleY(1) rotate(135deg);
   }

   50% {
      transform: scaleY(-1) rotate(0deg);
   }

   100% {
      transform: scaleY(-1) rotate(-135deg);
   }
}
</style>

Material UI

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   display: grid;
   animation: {{classname}}-animation {{speed}}s infinite;
}

.{{classname}}::before,
.{{classname}}::after {
   content: "";
   grid-area: 1/1;
   border: {{optionone}}px solid;
   border-radius: 50%;
   border-color: {{primary}} {{primary}} #0000 #0000;
   mix-blend-mode: darken;
   animation: {{classname}}-animation 1s infinite linear;
}

.{{classname}}::after {
   border-color: #0000 #0000 {{secondary}} {{secondary}};
   animation-direction: reverse;
}

@keyframes {{classname}}-animation {
   100% {
      transform: rotate(1turn);
   }
}
</style>

Counter Arcs

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   border: {{optionone}}px {{primary}} double;
   border-left-style: solid;
   border-radius: 50%;
   animation: {{classname}}-animation 0.75s infinite linear;
}

@keyframes {{classname}}-animation {
   to {
      transform: rotate(360deg);
   }
}
</style>

Circular Tube

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   animation: {{classname}}-animation {{speed}}s infinite linear;
   border-radius: {{size}}px;
   box-shadow: {{optionone}}
}

@keyframes {{classname}}-animation {
   to {
      transform: rotate(360deg);
   }
}
</style>

{"title":"Dot Ring","colors":{"primary":"#009E69"},"sizes":{"mini":4.8,"small":8,"medium":11.2,"large":14.4,"huge":17.6},"speed":{"veryslow":1.4,"slow":1.2,"average":1,"fast":0.8,"veryfast":0.6},"extra":{"optionone":"sizes"},"optionone":{"mini":"12px 0px 0 0 {{primary}}, 7.4px 9.4px 0 0 {{primary}}, -2.6px 11.6px 0 0 {{primary}}, -10.8px 5.2px 0 0 {{primary}}, -10.8px -5.2px 0 0 {{primary}}, -2.6px -11.6px 0 0 {{primary}}, 7.4px -9.4px 0 0 {{primary}};","small":"20px 0px 0 0 {{primary}}, 12.4px 15.6px 0 0 {{primary}}, -4.4px 19.4px 0 0 {{primary}}, -18px 8.6px 0 0 {{primary}}, -18px -8.6px 0 0 {{primary}}, -4.4px -19.4px 0 0 {{primary}}, 12.4px -15.6px 0 0 {{primary}};","medium":"28px 0px 0 0 {{primary}}, 17.4px 21.8px 0 0 {{primary}}, -6.2px 27.2px 0 0 {{primary}}, -25.2px 12px 0 0 {{primary}}, -25.2px -12px 0 0 {{primary}}, -6.2px -27.2px 0 0 {{primary}}, 17.4px -21.8px 0 0 {{primary}};","large":"36px 0px 0 0 {{primary}}, 22.3px 28.1px 0 0 {{primary}}, -7.9px 34.9px 0 0 {{primary}}, -32.4px 15.5px 0 0 {{primary}}, -32.4px -15.5px 0 0 {{primary}}, -7.9px -34.9px 0 0 {{primary}}, 22.3px -28.1px 0 0 {{primary}};","huge":"44px 0px 0 0 {{primary}}, 27.3px 34.3px 0 0 {{primary}}, -9.7px 42.7px 0 0 {{primary}}, -39.6px 18.9px 0 0 {{primary}}, -39.6px -18.9px 0 0 {{primary}}, -9.7px -42.7px 0 0 {{primary}}, 27.3px -34.3px 0 0 {{primary}};"}}

Dot Ring

<div class="{{classname}}"></div>

<style>
.{{classname}} {
   width: {{size}}px;
   height: {{size}}px;
   border-radius: {{size}}px;
   box-shadow: {{optionone}};
   animation: {{classname}}-animation {{speed}}s infinite linear;
}

@keyframes {{classname}}-animation {
   to {
      transform: rotate(360deg);
   }
}
</style>

{"title":"Half Ring","colors":{"primary":"#009E69"},"sizes":{"mini":4.8,"small":8,"medium":11.2,"large":14.4,"huge":17.6,"size":11.2},"speed":{"veryslow":1.4,"slow":1.2,"average":1,"fast":0.8,"veryfast":0.6},"extra":{"optionone":"sizes"},"optionone":{"mini":"12px 0px 0 0 rgba({{primaryrgb}},0.2), 9.7px 7.1px 0 0 rgba({{primaryrgb}},0.4), 3.7199999999999998px 11.4px 0 0 rgba({{primaryrgb}},0.6), -3.7199999999999998px 11.4px 0 0 rgba({{primaryrgb}},0.8), -9.7px 7.1px 0 0 {{primary}};","small":"20px 0px 0 0 rgba({{primaryrgb}},0.2), 16.2px 11.8px 0 0 rgba({{primaryrgb}},0.4), 6.2px 19px 0 0 rgba({{primaryrgb}},0.6), -6.2px 19px 0 0 rgba({{primaryrgb}},0.8), -16.2px 11.8px 0 0 {{primary}};","medium":"28px 0px 0 0 rgba({{primaryrgb}},0.2), 22.7px 16.5px 0 0 rgba({{primaryrgb}},0.4), 8.68px 26.6px 0 0 rgba({{primaryrgb}},0.6), -8.68px 26.6px 0 0 rgba({{primaryrgb}},0.8), -22.7px 16.5px 0 0 {{primary}};","large":"36px 0px 0 0 rgba({{primaryrgb}},0.2), 29.2px 21.2px 0 0 rgba({{primaryrgb}},0.4), 11.16px 34.2px 0 0 rgba({{primaryrgb}},0.6), -11.16px 34.2px 0 0 rgba({{primaryrgb}},0.8), -29.2px 21.2px 0 0 {{primary}};","huge":"44px 0px 0 0 rgba({{primaryrgb}},0.2), 35.6px 26px 0 0 rgba({{primaryrgb}},0.4), 13.64px 41.8px 0 0 rgba({{primaryrgb}},0.6), -13.64px 41.8px 0 0 rgba({{primaryrgb}},0.8), -35.6px 26px 0 0 {{primary}};","boxshadow":"28px 0px 0 0 rgba({{primaryrgb}},0.2), 22.7px 16.5px 0 0 rgba({{primaryrgb}},0.4), 8.68px 26.6px 0 0 rgba({{primaryrgb}},0.6), -8.68px 26.6px 0 0 rgba({{primaryrgb}},0.8), -22.7px 16.5px 0 0 {{primary}};"}}

Half Ring

Try Other Relevant Tools

PHP Formatter WCAG Contrast Checker Javascript Compressor Javascript Formatter XML to CSV Converter Minify Javascript Minify XML

About Tool

Rating Overview

0/5

0 ratings

You must login to submit your review. Click here to login.

0 Comments

Loading . . .

Ads

Ads Blocker Detected!!!

About Tool

Rating Overview