Progress Group

less than 1 minute read

References

TypeScript

import { Components } from "gd-sprest-bs";

// Create the progress group
let el = document.querySelector("#progressGroup");
let progressGroup = Components.ProgressGroup({
    el: el,
    progressbars: [
        {
            size: 25,
            isStriped: true,
            label: "25%"
        },
        {
            size: 50,
            isAnimated: true,
            isStriped: true,
            label: "50%"
        }
    ]
});

React

import * as React from "react";
import { ProgressGroup } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <ProgressGroup
                progressbars={[
                    {
                        size: 25,
                        isStriped: true,
                        label: "25%"
                    },
                    {
                        size: 50,
                        isAnimated: true,
                        isStriped: true,
                        label: "50%"
                    }
                ]}
            />
        );
    }
}

VueJS

<template>
    <ProgressGroup v-bind:progressbars="progressbars" />
</template>

<script>
import { ProgressGroup } from "gd-sprest-bs-vue";
export default {
    components: { ProgressGroup },
    data() {
        return {
            progressbars: [
                {
                    size: 25,
                    isStriped: true,
                    label: "25%"
                },
                {
                    size: 50,
                    isAnimated: true,
                    isStriped: true,
                    label: "50%"
                }
            ]
        };
    }
}
</script>

Code Playground