@wener/console
Version:
Base console UI toolkit
45 lines (44 loc) • 3.06 kB
JavaScript
import React from "react";
import { GradientSpinner, PlantRotating, PulseBubble, SolarSystemSpinner } from "./AlexWarnesCssLoader.js";
import { BarsSpinner } from "./BarsSpinner.js";
import { BoxShuffle } from "./BoxShuffle.js";
import { DotsFadeLoader } from "./DotsFadeLoader/DotsFadeLoader.js";
import { GooeyLoader } from "./GooeyLoader.js";
var meta = {
title: "web/loaders",
parameters: {
layout: "fullscreen"
}
};
export default meta;
export var Demo = function () {
return /*#__PURE__*/ React.createElement("div", {
className: "mx-auto p-6"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2 [&_h3]:border-b [&_h3]:font-semibold"
}, /*#__PURE__*/ React.createElement("h3", null, "DotsFadeLoader"), /*#__PURE__*/ React.createElement(DotsFadeLoader, null), /*#__PURE__*/ React.createElement("h3", null, "BarsSpinner"), /*#__PURE__*/ React.createElement("b", null, "bars=16"), /*#__PURE__*/ React.createElement(BarsSpinner, null), /*#__PURE__*/ React.createElement("b", null, "bars=20"), /*#__PURE__*/ React.createElement(BarsSpinner, {
bars: 20
}), /*#__PURE__*/ React.createElement("h3", null, "BoxShuffle"), /*#__PURE__*/ React.createElement("div", {
className: "relative mx-auto h-[180px] w-[180px]"
}, /*#__PURE__*/ React.createElement(BoxShuffle, null)), /*#__PURE__*/ React.createElement("cite", null, /*#__PURE__*/ React.createElement("a", {
href: "https://codepen.io/golle404/pen/EKOoyW",
target: "_blank",
rel: "noreferrer noopener"
}, "CodePen")), /*#__PURE__*/ React.createElement("h3", null, "GooeyLoader"), /*#__PURE__*/ React.createElement("div", {
className: "relative h-60 w-60"
}, /*#__PURE__*/ React.createElement(GooeyLoader, null)), /*#__PURE__*/ React.createElement("cite", null, /*#__PURE__*/ React.createElement("a", {
href: "https://codepen.io/Izumenko/pen/MpWyXK",
target: "_blank",
rel: "noreferrer noopener"
}, "CodePen")), /*#__PURE__*/ React.createElement("h3", null, "AlexWarnesCssLoader"), /*#__PURE__*/ React.createElement("div", {
style: {
backgroundColor: "#37474f",
padding: 100
},
className: "flex flex-col items-center text-white"
}, /*#__PURE__*/ React.createElement("h3", null, "GradientSpinner"), /*#__PURE__*/ React.createElement(GradientSpinner, null), /*#__PURE__*/ React.createElement("h3", null, "SolarSystemSpinner"), /*#__PURE__*/ React.createElement(SolarSystemSpinner, null), /*#__PURE__*/ React.createElement("h3", null, "PlanetRotatingBox"), /*#__PURE__*/ React.createElement(PlantRotating, null), /*#__PURE__*/ React.createElement("h3", null, "PulseBubble"), /*#__PURE__*/ React.createElement(PulseBubble, null)), /*#__PURE__*/ React.createElement("cite", null, /*#__PURE__*/ React.createElement("a", {
href: "https://codepen.io/AlexWarnes/pen/jXYYKL",
target: "_blank",
rel: "noreferrer noopener"
}, "AlexWarnes CSS Loading Animations @CodePen"))));
};