design-themes/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="progress" data-selector=".s_progress_bar .progress-bar"/>
            <div data-js="colorpicker" data-selector=".s_progress_bar" data-target=".progress-bar">
                <div class="dropdown-submenu">
                    <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Colors</a>
                    <div class="dropdown-menu" role="menu"/>
                </div>
            </div>
            <div data-js="progress" data-selector=".s_progress_bar" data-target=".progress-bar">
                <div class="dropdown-submenu">
                    <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-magic"/>Styles</a>
                    <div class="dropdown-menu" role="menu">
                        <a href="#" class="dropdown-item" data-toggle-class="progress-bar-striped">Striped</a>
                        <a href="#" class="dropdown-item" data-toggle-class="progress-bar-animated">Animated</a>
                    </div>
                </div>
            </div>
        </xpath>
        <xpath expr="//div[@data-js='content']" position="attributes">
            <attribute name="data-selector" add=".s_progress_bar" separator=","/>
            <attribute name="data-drop-near" add=".s_progress_bar" separator=","/>
        </xpath>
    </template>
</odoo>