odoo_theme/theme_graphene/theme_common/views/s_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template name="Progress Bar" id="s_progress_bar">
        <div class="s_progress_bar progress" data-name="Progress Bar">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <span>80% Development</span>
            </div>
        </div>
    </template>

    <template id="s_options_progress_bar" inherit_id="website.snippet_options">
        <xpath expr="." position="inside">
            <div data-js="colorpicker" data-selector=".s_progress_bar" data-target=".progress-bar">
                <we-collapse-area>
                    <we-toggler><i class="fa fa-fw fa-eyedropper"/> Colors</we-toggler>
                    <we-collapse/>
                </we-collapse-area>
            </div>
            <div data-js="progress" data-selector=".s_progress_bar" data-target=".progress-bar">
                <we-collapse-area>
                    <we-toggler><i class="fa fa-fw fa-magic"/> Styles</we-toggler>
                    <we-collapse>
                        <we-button data-toggle-class="progress-bar-striped">Striped</we-button>
                        <we-button data-toggle-class="progress-bar-animated">Animated</we-button>
                    </we-collapse>
                </we-collapse-area>
            </div>
        </xpath>
        <xpath expr="//div[@id='so_content_addition']" position="attributes">
            <attribute name="data-selector" add=".s_progress_bar" separator=","/>
            <attribute name="data-drop-near" add=".s_progress_bar" separator=","/>
        </xpath>
    </template>
</odoo>