mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 02:37:09 +03:00
Added animated page loaders
Added six page loader components
This commit is contained in:
jasonleyser
parent
afcf54c651
commit
1efa773be9
@ -247,6 +247,7 @@ export default class SystemPage extends React.Component {
|
||||
title="Notifications"
|
||||
/>
|
||||
<SidebarLink url={url} href="/system/modals" title="Modals" />
|
||||
<SidebarLink url={url} href="/system/loaders" title="Loaders" />
|
||||
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
|
||||
270
components/system/components/Loaders.js
Normal file
270
components/system/components/Loaders.js
Normal file
@ -0,0 +1,270 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER 1
|
||||
|
||||
const STYLES_LOADER_CIRCLE = `
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: ${Constants.system.brand};
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
animation: circle-bouncedelay 1.6s infinite ease-in-out both;
|
||||
|
||||
@keyframes circle-bouncedelay {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_CIRCLE_ONE = css`
|
||||
${STYLES_LOADER_CIRCLE}
|
||||
animation-delay: -0.16s;
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_CIRCLE_TWO = css`
|
||||
${STYLES_LOADER_CIRCLE}
|
||||
animation-delay: -0.32s;
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_CIRCLE_THREE = css`
|
||||
${STYLES_LOADER_CIRCLE}
|
||||
`;
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER 2
|
||||
|
||||
const STYLES_LOADER_DIAMONDS = css`
|
||||
margin-left: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: rotate(-45deg);
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_DIAMOND = `
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
z-index: 1;
|
||||
animation: animate-diamond 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95)
|
||||
infinite alternate;
|
||||
|
||||
@keyframes animate-diamond {
|
||||
0% {
|
||||
transform: translate3d(-10px, -10px, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(10px, 10px, 0);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_DIAMOND_ONE = css`
|
||||
${STYLES_LOADER_DIAMOND}
|
||||
background: ${Constants.system.brand};
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
animation-direction: alternate-reverse
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_DIAMOND_TWO = css`
|
||||
${STYLES_LOADER_DIAMOND}
|
||||
background: ${Constants.system.black};
|
||||
left: 0;
|
||||
top: 0;
|
||||
`;
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER 3
|
||||
|
||||
const STYLES_LOADER_MOON = css`
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_MOON_CIRCLE = css`
|
||||
position: absolute;
|
||||
margin: 4px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: ${Constants.system.foreground};
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 10px solid ${Constants.system.brand};
|
||||
border-radius: 50%;
|
||||
animation: animation-spin 1.15s ease infinite;
|
||||
|
||||
@keyframes animation-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER 4
|
||||
|
||||
const STYLES_LOADER_ROTATE = css`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const STYLES_LOADER_ROTATE_SQUARES = css`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0px 0px 0px 16px;
|
||||
|
||||
:after,
|
||||
:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border: 2px solid ${Constants.system.brand};
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
:after {
|
||||
animation: animation-spinner-1 2.88s linear infinite;
|
||||
}
|
||||
:before {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
animation: animation-spinner-2 2.88s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes animation-spinner-1 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation-spinner-2 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER 5
|
||||
|
||||
const STYLES_LOADER_PROGRESS = css`
|
||||
width: 0;
|
||||
height: 16px;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
#2935ff,
|
||||
#342fc4,
|
||||
#33288b,
|
||||
#2b2157,
|
||||
#1d1927
|
||||
);
|
||||
border-radius: 4px;
|
||||
animation: progressbar 5s infinite;
|
||||
transition: width 0.8s ease;
|
||||
|
||||
@keyframes progressbar {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER 6
|
||||
|
||||
const STYLES_LOADER_SPINNER = css`
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid ${Constants.system.brand};
|
||||
border-radius: 50%;
|
||||
border-top-color: ${Constants.system.foreground};
|
||||
animation: animation-spin 1s ease-in-out infinite;
|
||||
|
||||
@keyframes animation-spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//LOADER EXPORTS
|
||||
|
||||
export const LoaderProgress = () => <div css={STYLES_LOADER_PROGRESS}></div>;
|
||||
|
||||
export const LoaderSpinner = () => <div css={STYLES_LOADER_SPINNER}></div>;
|
||||
|
||||
export const LoaderCircles = () => (
|
||||
<div>
|
||||
<div css={STYLES_LOADER_CIRCLE_TWO}></div>
|
||||
<div css={STYLES_LOADER_CIRCLE_ONE}></div>
|
||||
<div css={STYLES_LOADER_CIRCLE_THREE}></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const LoaderDiamonds = () => (
|
||||
<div css={STYLES_LOADER_DIAMONDS}>
|
||||
<div css={STYLES_LOADER_DIAMOND_ONE}></div>
|
||||
<div css={STYLES_LOADER_DIAMOND_TWO}></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const LoaderMoon = () => (
|
||||
<div css={STYLES_LOADER_MOON}>
|
||||
<div css={STYLES_LOADER_MOON_CIRCLE}></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const LoaderRotate = () => (
|
||||
<div css={STYLES_LOADER_ROTATE}>
|
||||
<div css={STYLES_LOADER_ROTATE_SQUARES}></div>
|
||||
</div>
|
||||
);
|
||||
@ -31,6 +31,15 @@ import { Input } from "~/components/system/components/Input";
|
||||
import { ListEditor } from "~/components/system/components/ListEditor";
|
||||
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
|
||||
import { RadioGroup } from "~/components/system/components/RadioGroup";
|
||||
import {
|
||||
LoaderCircles,
|
||||
LoaderDiamonds,
|
||||
LoaderMoon,
|
||||
LoaderRotate,
|
||||
LoaderProgress,
|
||||
LoaderSpinner,
|
||||
} from "~/components/system/components/Loaders";
|
||||
|
||||
import {
|
||||
SelectCountryMenu,
|
||||
SelectMenu,
|
||||
@ -106,4 +115,10 @@ export {
|
||||
Constants,
|
||||
SVG,
|
||||
OldSVG,
|
||||
LoaderCircles,
|
||||
LoaderDiamonds,
|
||||
LoaderMoon,
|
||||
LoaderRotate,
|
||||
LoaderProgress,
|
||||
LoaderSpinner,
|
||||
};
|
||||
|
||||
99
pages/system/loaders.js
Normal file
99
pages/system/loaders.js
Normal file
@ -0,0 +1,99 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemLoaders extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Loaders"
|
||||
description="..."
|
||||
url="https://slate.host/system/loaders"
|
||||
>
|
||||
<System.H1>
|
||||
Loaders <ViewSourceLink file="system/loaders.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
The Loader Component is used to output an animated page loader.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Imports</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import the Loader Components.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`
|
||||
import {
|
||||
LoaderCircles,
|
||||
LoaderDiamonds,
|
||||
LoaderMoon,
|
||||
LoaderRotate,
|
||||
LoaderProgress,
|
||||
LoaderSpinner,
|
||||
} from "~/components/system/components/Loaders";
|
||||
`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Circles</System.P>
|
||||
<br />
|
||||
<System.LoaderCircles />
|
||||
<br />
|
||||
<System.CodeBlock>{`<LoaderCircles />`}</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Progress Bar</System.P>
|
||||
<br />
|
||||
<System.LoaderProgress />
|
||||
<br />
|
||||
<System.CodeBlock>{`<LoaderProgress />`}</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Spinner</System.P>
|
||||
<br />
|
||||
<System.LoaderSpinner />
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>{`<LoaderSpinner />`}</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Diamonds</System.P>
|
||||
<br />
|
||||
<System.LoaderDiamonds />
|
||||
<br />
|
||||
<System.CodeBlock>{`<LoaderDiamonds />`}</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Rotate</System.P>
|
||||
<br />
|
||||
<System.LoaderRotate />
|
||||
<br />
|
||||
<System.CodeBlock>{`<LoaderRotate />`}</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Moon</System.P>
|
||||
<br />
|
||||
<System.LoaderMoon />
|
||||
<br />
|
||||
<System.CodeBlock>{`<LoaderMoon />`}</System.CodeBlock>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user