m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adds pulse loader component (#9259)

Browse Source 
* Adds pulse loader component

* Move pulse-loader component to the UI directory
This commit is contained in:
Dan J Miller 2020-08-18 16:53:36 -02:30 committed by GitHub
parent c1e3c229bc
commit 09e7f24b2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/app/index.scss
View File

@ -65,3 +65,4 @@
@import '../ui/account-mismatch-warning/index';
@import '../ui/icon-border/icon-border';
@import '../ui/info-tooltip/index';
@import '../ui/pulse-loader/index';

1
ui/app/components/ui/pulse-loader/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './pulse-loader'

63
ui/app/components/ui/pulse-loader/index.scss Normal file
View File

@ -0,0 +1,63 @@
.pulse-loader {
display: flex;
&__loading-dot-one,
&__loading-dot-two,
&__loading-dot-three {
background: $Blue-500;
width: 4px;
height: 4px;
margin-right: 2px;
border-radius: 100%;
animation-fill-mode: both;
}
&__loading-dot-one {
-webkit-animation: loading-dot 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: loading-dot 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
&__loading-dot-two {
-webkit-animation: loading-dot 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: loading-dot 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
&__loading-dot-three {
-webkit-animation: loading-dot 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: loading-dot 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
@-webkit-keyframes loading-dot {
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(0.7);
opacity: 0.7;
}
80% {
transform: scale(1);
opacity: 1;
}
}
@keyframes loading-dot {
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(0.7);
opacity: 0.7;
}
80% {
transform: scale(1);
opacity: 1;
}
}
}

11
ui/app/components/ui/pulse-loader/pulse-loader.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
export default function PulseLoader () {
return (
<div className="pulse-loader">
<div className="pulse-loader__loading-dot-one" />
<div className="pulse-loader__loading-dot-two" />
<div className="pulse-loader__loading-dot-three" />
</div>
)
}

8
ui/app/components/ui/pulse-loader/pulse-loader.stories.js Normal file
View File

@ -0,0 +1,8 @@
import React from 'react'
import PulseLoader from '.'
export default {
title: 'PulseLoader',
}
export const common = () => (<PulseLoader />)