Git Product home page Git Product logo

Comments (9)

Vishal0203 avatar Vishal0203 commented on July 23, 2024 3

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.

alexbra avatar alexbra commented on July 23, 2024 2

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.

alexbra avatar alexbra commented on July 23, 2024 2

@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.

Vishal0203 avatar Vishal0203 commented on July 23, 2024 1

@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.

chatch avatar chatch commented on July 23, 2024

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.

Vishal0203 avatar Vishal0203 commented on July 23, 2024

@alexbra Would love to take a look :)

from halogen.

Vishal0203 avatar Vishal0203 commented on July 23, 2024

@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.

epogue avatar epogue commented on July 23, 2024

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.

pisaacs avatar pisaacs commented on July 23, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.