Learn more »
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Bower components
Debian packages
RPM packages
NuGet packages
/ src / components / features / Animations / Preloader / MaterialProgressLoader / styled.tsx
import { styled } from 'styleh-components'
const materialProgressLoaderStyles = styled.todo`
.material-progress-loader {
background-color: var(--color-light-grey);
display: flex;
height: 3px;
width: 100%;
margin: 0;
&:before {
height: 3px;
width: 100%;
margin: 0;
background-color: var(--color-blue);
content: '';
animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
}
@keyframes running-progress {
0% {
margin-left: 0px;
margin-right: 100%;
}
50% {
margin-left: 25%;
margin-right: 0%;
}
100% {
margin-left: 100%;
margin-right: 0;
}
}
`
export { materialProgressLoaderStyles }