Comments (9)
I have the same problem. I think this repo is not maintained anymore.
I think this https://github.com/kirillDanshin/halogenium is maintained. Even I'll give it a try
from halogen.
There are lots of examples of similar loaders in the Internet. So, I just created my own 30-lines react component for that purpose :)
from halogen.
@Vishal0203
sure. I use Radium and Typescript
import * as Radium from 'radium';
export const Loader = Radium((props: { color: string, size: string, margin: string }) => {
return (
<div>
<div style={styles.dotStyle(props.color, props.size, props.margin, 1)} />
<div style={styles.dotStyle(props.color, props.size, props.margin, 2)} />
<div style={styles.dotStyle(props.color, props.size, props.margin, 3)} />
</div>
);
})
const pulseKeyframes = Radium.keyframes({
'0%': {
transform: 'scale(1)',
opacity: 1
},
'45%': {
transform: 'scale(0.1)',
opacity: 0.7
},
'80%': {
transform: 'scale(1)',
opacity: 1
}
}, 'pulse');
const styles = {
dotStyle: (color: string, size: string, margin: string, i: number) => {
return {
backgroundColor: color,
width: size,
height: size,
margin: margin,
borderRadius: '100%',
animation: `0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08)`,
animationName: pulseKeyframes,
animationFillMode: 'both',
display: 'inline-block'
}
}
};
from halogen.
@chatch Aware of it. But even if you fix it and try to raise a PR, it doesn't look like it is going to get merged.
from halogen.
The issue is described here:
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass
Replace with a class or use the drop in replacement.
from halogen.
@alexbra Would love to take a look :)
from halogen.
@alexbra Looks good! I didn't know about radium. I think its better to create our own as you said. Thanks for share.
from halogen.
Yep! I similarly used styled-components (and prop-types for now) to roll my own.
import React from "react";
import PropTypes from "prop-types";
import styled, { keyframes } from "styled-components";
const pulse = keyframes`
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(0.1);
opacity: 0.7;
}
80% {
transform: scale(1);
opacity: 1;
}
`;
const Ball = styled.div`
display: inline-block;
border: 0px solid transparent;
background: ${props => props.color};
width: ${props => props.size};
height: ${props => props.size};
margin: ${props => props.margin};
border-radius: 100%;
animation: 0.75s cubic-bezier(.2,.68,.18,1.08) ${props => props.iteration * 0.12 + "s"} infinite both ${pulse};
`;
Ball.propTypes = {
color: PropTypes.string,
size: PropTypes.string,
margin: PropTypes.string,
iteration: PropTypes.number
};
const PulseLoader = ({
color = "#fff",
size = "15px",
margin = "2px",
...otherProps
}) => {
const ballProps = { color, size, margin };
return (
<div {...otherProps}>
<Ball iteration={1} {...ballProps} />
<Ball iteration={2} {...ballProps} />
<Ball iteration={3} {...ballProps} />
</div>
);
};
export default PulseLoader;
from halogen.
Sad to see repo no longer being maintained, even if others are will to be contributors.
Anyway, https://github.com/kirillDanshin/halogenium seems to be the next best option.
from halogen.
Related Issues (20)
- insertRule() syntax error in IE11 HOT 4
- Server pre-rendering support HOT 3
- Center loader HOT 1
- Support for React 0.14 HOT 3
- cannot render on server side HOT 3
- breaks in PhantomJS HOT 1
- Support for React v15 HOT 4
- Support style attribute beside className
- RiseLoader throws DomException on iOS (5) Safari HOT 1
- Shrinkwrap fail
- Margin property seems not used for RingLoader
- An updated repository
- Halogen Loaders are not working with React 16.0.0 HOT 7
- require.extensions.hasOwnProperty is not a function
- Remove the http://madscript.com/halogen reference from the repository description HOT 2
- Potential improvement of the docs: ES6+ syntax and broken icon for browsers support.
- Cannot read property 'bool' of undefined HOT 3
- Which is which???
- Website is down
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from halogen.