"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _formatMessage = _interopRequireDefault(require("../../format-message"));

var _ScreenReaderContent = _interopRequireDefault(require("@instructure/ui-a11y/lib/components/ScreenReaderContent"));

var _aphrodite = require("aphrodite");

/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
function Loading(props) {
  var className = ((0, _aphrodite.css)(styles.loading) + " " + props.className).trim();
  return _react.default.createElement("span", {
    className: className
  }, _react.default.createElement(_ScreenReaderContent.default, null, "Trwa \u0142adowanie..."), _react.default.createElement("span", {
    className: (0, _aphrodite.css)(styles.dot, styles.dot0)
  }), _react.default.createElement("span", {
    className: (0, _aphrodite.css)(styles.dot, styles.dot1)
  }), _react.default.createElement("span", {
    className: (0, _aphrodite.css)(styles.dot, styles.dot2)
  }));
}

Loading.propTypes = {
  className: _propTypes.default.string
};
Loading.defaultProps = {
  className: ""
};
var opacityKeyframes = {
  "0%": {
    opacity: 0
  },
  "50%": {
    opacity: 1
  },
  "100%": {
    opacity: 0
  }
};

var styles = _aphrodite.StyleSheet.create({
  loading: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "space-around",
    width: "48px",
    height: "10px"
  },
  dot: {
    animationName: [opacityKeyframes],
    animationDuration: "1.95s",
    animationIterationCount: "infinite",
    animationDirection: "linear",
    background: "#666",
    borderRadius: "8px",
    width: "10px",
    height: "10px",
    flex: "none"
  },
  dot0: {
    animationDelay: "-1.8s"
  },
  dot1: {
    animationDelay: "-1.6s"
  },
  dot2: {
    animationDelay: "-1.4s"
  }
});

var _default = Loading;
exports.default = _default;