@tamagui/react-native-web-lite/dist/esm/ActivityIndicator/index.js

React Native for Web

import * as React from "react";
import { StyleSheet } from "@tamagui/react-native-web-internals";
import View from "../View/index";
import { jsx, jsxs } from "react/jsx-runtime";
const createSvgCircle = (style) => /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", fill: "none", r: "14", strokeWidth: "4", style }), ActivityIndicator = React.forwardRef(
  (props, forwardedRef) => {
    const {
      animating = !0,
      color = "#1976D2",
      hidesWhenStopped = !0,
      size = "small",
      style,
      ...other
    } = props, svg = /* @__PURE__ */ jsxs("svg", { height: "100%", viewBox: "0 0 32 32", width: "100%", children: [
      createSvgCircle({
        stroke: color,
        opacity: 0.2
      }),
      createSvgCircle({
        stroke: color,
        strokeDasharray: 80,
        strokeDashoffset: 60
      })
    ] });
    return /* @__PURE__ */ jsx(
      View,
      {
        ...other,
        accessibilityRole: "progressbar",
        accessibilityValueMax: 1,
        accessibilityValueMin: 0,
        ref: forwardedRef,
        style: [styles.container, style],
        children: /* @__PURE__ */ jsx(
          View,
          {
            children: svg,
            style: [
              typeof size == "number" ? { height: size, width: size } : indicatorSizes[size],
              styles.animation,
              !animating && styles.animationPause,
              !animating && hidesWhenStopped && styles.hidesWhenStopped
            ]
          }
        )
      }
    );
  }
);
ActivityIndicator.displayName = "ActivityIndicator";
const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center"
  },
  hidesWhenStopped: {
    visibility: "hidden"
  },
  animation: {
    animationDuration: "0.75s",
    animationKeyframes: [
      {
        "0%": { transform: [{ rotate: "0deg" }] },
        "100%": { transform: [{ rotate: "360deg" }] }
      }
    ],
    animationTimingFunction: "linear",
    animationIterationCount: "infinite"
  },
  animationPause: {
    animationPlayState: "paused"
  }
}), indicatorSizes = StyleSheet.create({
  small: {
    width: 20,
    height: 20
  },
  large: {
    width: 36,
    height: 36
  }
});
var ActivityIndicator_default = ActivityIndicator;
export {
  ActivityIndicator_default as default
};
//# sourceMappingURL=index.js.map