n3r4zzurr0 / svg-spinners Goto Github PK

View Code? Open in Web Editor NEW

5.7K 5.7K 798.0 174 KB

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

License: MIT License

SVG 100.00%

svg-animated-icons

svg-spinners's Introduction

svg-spinners's People

Contributors

Stargazers

Watchers

Forkers

j4ckp4ck decodedmonkey meafs nuggex v1210n aro1914 jacksloan kokopuffz mac-mann guillaumedeconinck john-j-stout huntsekkern romanstetsyk travishunting dotkwame therustmonk yotimoto oberocks peterazv jamiejohnsonkc zanenewberry jicjames zack-carlson 4seal kaskaush elitekebob zadigg chrisarmitage mariusdec vladmirputgang kagithapk alexislyndon yanchoo noboku zhyang813 qualiky catgoose tylershin engelkek huangsijun17 ekeng4488 aicegate jinxiansen tngamemo oleg1994 javahuang cooldrineliu imgoogege aleckrh pawelkawa arodu cy-perez sergiorodas alexkrave tongkunzhang sumad200 al3x4ndr0s geauxweisbeck4 maogar10 xregitx jqhxx pyting qing-ke tzygeneral finding babar-bashir xiaohunqupo evan2020 gastroam albertsanchezp uakbr codeartisanry iuriimattos2 xdaro ndlinh-celtic nnnnat cristian9016 loorr smithellis sametaln casual-lab vophihungvn user01010011 manimonji yunfour daodaoliang kosinix huzeyfecoskun listenwhy tilo-atlas adrianvillanueva997 kentkost mihaiiro huobaohuangxu itsberriver kewpie134134 rimim maadeval developeriplan seisenberg

svg-spinners's Issues

Use transform instead of height and y to improve performance

For those that are using height and y for animation, for ex bars-scale.svg, it can cause the browser to repaint, which is not good for performance.
The same animation effect can be achieved using the transform property instead.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner_jCIR {
      animation: spinner_B8Vq .9s linear infinite;
      animation-delay: -.9s;
      transform-origin: center;
      animation-timing-function: cubic-bezier(0.36, .61, .3, .98);
    }

    .spinner_upm8 {
      animation-delay: -.8s
    }

    .spinner_2eL5 {
      animation-delay: -.7s
    }

    .spinner_Rp9l {
      animation-delay: -.6s
    }

    .spinner_dy3W {
      animation-delay: -.5s
    }

    @keyframes spinner_B8Vq {

      0%,
      66.66% {
        transform: scaleY(1);
      }

      33.33% {
        transform: scaleY(1.8);
      }
    }
  </style>
  <rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12" />
</svg>

Floating point parsing error in Firefox

Most of the animations don't work on Firefox (102 beta 6).
The error in the log for this example is:

Unexpected value .75s parsing dur attribute.

Apparently Firefox does not support decimal numbers without a leading digit, which might be standard-conforming and not a bug in Firefox. Fixing the number to read 0.75 immediately restores the animation for the example above.
I looked for a bit into the SVG specification and I found a statement related to the "dur" attribute format in this particular case:

Timecount-val ::= Timecount ("." Fraction)? (Metric)?

In other words, the decimal point, the fractional part and the metric are optional, but the first digit must always be present.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Off-center spinner</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .spinner_aj0A {
      transform-origin: center;
      animation: spinner_KYSC 0.75s infinite linear;
      fill: hsl(var(--muted-foreground));
    }

    @keyframes spinner_KYSC {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" class="spinner_aj0A" />
  </svg>
</body>

</html>

n3r4zzurr0 / svg-spinners Goto Github PK

svg-spinners's Introduction

svg-spinners's People

Contributors

Stargazers

Watchers

Forkers

svg-spinners's Issues

Use transform instead of height and y to improve performance

Floating point parsing error in Firefox

how to switch color of the indicator?

Discussion on fill being the current color

svg-smil/3-dots-move.svg contains duplicate IDs

Licensing

React Component Library

Issues with rendering edges on macOS Safari 15

Spinner is off-center at zoom levels other than 100% in Safari

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent