Skip to content

Instantly share code, notes, and snippets.

@ohmyjersh

ohmyjersh/progressbar

Created November 13, 2017 01:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ohmyjersh/0053b078e034b5f3b8b48aee93dcee4d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ohmyjersh/0053b078e034b5f3b8b48aee93dcee4d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ohmyjersh created this gist Nov 13, 2017.
    93 changes: 93 additions & 0 deletions progressbar
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    import React, { Component } from 'react';
    import styled from 'styled-components';

    const Wrap = styled.div`padding: 8px; `

    const BarPercentage = styled.div`
    float: left;
    background: rgba(0,0,0,0.13);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 9px 0px;
    width: 18%;
    height: 16px;
    `

    const BarContainer = styled.div`
    float: right;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    height: 10px;
    background: rgba(0,0,0,0.13);
    width: 78%;
    margin: 12px 0px;
    overflow: hidden;
    `
    const Bar = styled.div`
    float: left;
    background: #FFF;
    height: 100%;
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    `
    class ProgressBar extends Component {
    constructor(props) {
    super(props);
    this.state = {
    current: 0,
    percentage: props.percentage
    }
    }

    timer = () => {
    this.setState({
    current: this.state.current + 1
    })
    if (this.state.current === this.state.percentage) {
    clearInterval(this.intervalId);
    }
    }
    componentDidMount() {
    this.intervalId = setInterval(this.timer, 100);
    }
    componentWillUnmount() {
    clearInterval(this.intervalId);
    }

    render() {
    console.log(this.props.background);
    const Container = styled.div`
    background: ${this.props.background};
    margin: 10px auto;
    width: 300px;
    height: 50px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.8em;
    color: #FFF;`;

    return (
    <Container>
    <Wrap>
    <BarPercentage>{`${this.state.current}%`}</BarPercentage>
    <BarContainer>
    <Bar style={{ width: `${this.state.current}%` }} />
    </BarContainer>
    </Wrap>
    </Container>
    )
    }
    }

    export default ProgressBar;