svg spinner / loader not displaying-on mobile browsers

Question

The svg spinner is displaying correctly in desktop firefox and chrome but not in chrome or firefox mobile browser. Does anyone have a solution for this?


const Spinner = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    style={{
      margin: "auto",
      background: "none",
      display: "block",
      shapeRendering: "auto",
    }}
    width="120px"
    height="120px"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid"
  >
    <path
      fill="none"
      stroke="#441C55"
      strokeWidth="3"
      strokeDasharray="197.57347473144532 59.015453491210934"
      d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
      strokeLinecap="round"
      style={{ transform: "scale(0.8)", transformOrigin: "50px 50px" }}
    >
      <animate
        attributeName="stroke-dashoffset"
        repeatCount="indefinite"
        dur="1s"
        keyTimes="0;1"
        values="0;256.58892822265625"
      ></animate>
    </path>
  </svg>
);

export default Spinner;

On an iPhone? You do know that on an iPhone all browsers are basically Safari. — Robert Longson
– Robert Longson, Commented May 5, 2023 at 13:24

chrwahl · Accepted Answer · 2023-05-06 07:47:44Z

0

This probably doesn't help (but now I tested Firefox and Chrome on Android and Safari on iOS and it works fine). Here is a slightly-cleaned-up version where I replaced some of the curves in the path with arcs.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="120"
  style="margin: auto; display: block;"
  viewBox="0 0 114 54">
  <path
    transform="translate(2 2)"
    fill="none"
    stroke="#441C55"
    stroke-width="4"
    stroke-dasharray="70 30"
    d="M 25 0
       A 1 1 0 0 0 25 50
       C 55 50 55 0 85 0
       A 1 1 0 0 1 85 50
       C 55 50 55 0 25 0 Z"
    pathLength="100"
    stroke-linecap="round">
    <animate
      attributeName="stroke-dashoffset"
      repeatCount="indefinite"
      dur="1s"
      keyTimes="0;1"
      values="0;100"/>
  </path>
</svg>

edited May 6, 2023 at 7:47

answered May 6, 2023 at 7:38

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

svg spinner / loader not displaying-on mobile browsers

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related