conic gradient css not working in React for unknown reason

Question

I have a simple started project in react and I am trying to use conic-gradient in react. Here is the code :

import React, {Component} from 'react';




export default class App extends Component {
    constructor(props) {
        super(props);



    }



    render(){

        return(
            <div>
                <div style = {styles.progressCircle}></div>

            </div>
        );
    }
}

const styles = {
    progressCircle : {
        width: "100px",
        height: "100px",
        borderRadius: "50%",
        background: "conicGradient(red 4%, gray 0 8%, blue 0 17%,yellow 0 48%,purple 0 54%, orange 0)"
    }
}

Nothing shows up on the screen . why is that?

the support is still low, it should work only on chrome developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient — Temani Afif
– Temani Afif, Commented Dec 25, 2019 at 14:06

Babak Yaghoobi · Accepted Answer · 2019-12-25 15:09:18Z

changed your sample to run code snippet

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>

<body>
    <div id="app_root"></div>
      
    <script type="text/babel">
    
const styles = {
    progressCircle : {
        width: "200px",
        height: "200px",
        borderRadius: "50%",
        background: "conic-gradient(red 4%, gray 0 8%, blue 0 17%,yellow 0 48%,purple 0 54%, orange 0)"
    }
}    
        var Hello = React.createClass({ 
            render: function() { 
                return(
                    <div style = {styles.progressCircle}></div>
                ); 
            } 
       }); 

       ReactDOM.render(<Hello />, document.getElementById("app_root"));
    </script>
</body>

Collectives™ on Stack Overflow

conic gradient css not working in React for unknown reason

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related