Add css for loading visual hint to plotly figure div

还没有人认领这个 Issue。

On a slow Internet connection, when loading a webpage with a plotly figure getting plotly from the cdn (created with include_plotlyjs=False), there is no visual indication that the figure is loading, the page is just empty and frozen until the figure is rendered. An alternative would be to add a loading div which would contain a rotating circle when the plotly fig div is rotating.

Here is an example of code (courtesy of @GaelVaroquaux)

Current plotly figure

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>
        
                <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>    
            <div id="5ce67915-186c-4a00-9800-072154c9af49" class="plotly-graph-div" style="height:100%; width:100%;"></div>
            <script type="text/javascript">
                
                    window.PLOTLYENV=window.PLOTLYENV || {};
                    
                if (document.getElementById("5ce67915-186c-4a00-9800-072154c9af49")) {
                    Plotly.newPlot(
                        '5ce67915-186c-4a00-9800-072154c9af49',
                        [{"type": "scatter", "x": [1, 2], "y": [2, 2]}],
                        {"template": {}},
                        {"responsive": true}
                    )
                };
                
            </script>
        </div>
</body>
</html>

and adding the loading component

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>
    <style>
    div.plotly-graph-loading {text-align: center; display: none;}

    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }

    div.plotly-graph-div:empty + div.plotly-graph-loading {
        margin: -50% auto 0 auto;
        display: block;
        width: 3rem;
        height: 3rem;
        vertical-align: text-bottom;
        border: .4rem solid #222;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border 1s linear infinite;
    }
    </style>

        
            <div id="5ce67915-186c-4a00-9800-072154c9af49" class="plotly-graph-div" style="height:100%; width:100%;"></div>
	    <div class="plotly-graph-loading" role="status"></div>
                <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>    
            <script type="text/javascript">
                
                    window.PLOTLYENV=window.PLOTLYENV || {};
                    
                if (document.getElementById("5ce67915-186c-4a00-9800-072154c9af49")) {
                    Plotly.newPlot(
                        '5ce67915-186c-4a00-9800-072154c9af49',
                        [{"type": "scatter", "x": [1, 2], "y": [2, 2]}],
                        {"template": {}},
                        {"responsive": true}
                    )
                };
                
            </script>
        </div>
</body>
</html>

This is a small addition but it can be helpful to show that something will happen. What do you think @nicolaskruchten @jonmease? I'm happy to make a PR but wanted to discuss it with you first.

定位生成 Plotly 图形 div 及其周围 HTML 的代码，然后将其与 issue 中显示的加载组件进行比较。通过缓慢的 CDN 加载验证结果：空图形应显示加载指示器，并在 Plotly 渲染图形后消失。

由索引模型根据 Issue 内容生成。

描述

贡献指南

从这里开始

调研方向

评估

Add css for loading visual hint to plotly figure div

描述

贡献指南

从这里开始

调研方向

评估

把新 issue 发到你的邮箱