1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/components/ui/pulse-loader/index.scss
2020-10-06 15:58:38 -02:30

64 lines
1.3 KiB
SCSS

.pulse-loader {
display: flex;
&__loading-dot-one,
&__loading-dot-two,
&__loading-dot-three {
background: $Blue-500;
width: 9px;
height: 9px;
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;
}
}
}