How to create shortcode for custom progress bar addon in visual composer?

[admin]

There is a built-in addon named Progress Bar in visual composer. I want to create a custom progress bar of my own style.

My custom progress bar addon code:

<?php

  // About Us 2 addons
   vc_map( array(
      'name'         => __( 'About Us & Progress Bar', 'f_triangle' ),
      'base'         => 'abt_us_progress_bar',
      "category"     => __( "F Triangle", "f_triangle"),
      'description'  => __( '', 'f_triangle' ),
      'params'       => array(
         array(
            'type'         => 'param_group',
            'heading'      => __( 'Values', 'f_triangle' ),
            'param_name'   => 'values',
            'description'  => __( 'Enter values for graph - value, title and color.', 'f_triangle' ),
            'group'        => __( 'Progress Bar', 'f_triangle' ),
            'value'        => urlencode( json_encode( array(
               array(
                  'label' => __( 'Design', 'f_triangle' ),
                  'value' => '35',
               ),
               array(
                  'label' => __( 'HTML', 'f_triangle' ),
                  'value' => '80',
               ),
               array(
                  'label' => __( 'PHP', 'f_triangle' ),
                  'value' => '60',
               ),
            ) ) ),
            'params' => array(
               array(
                  'type'         => 'textfield',
                  'heading'      => __( 'Label', 'f_triangle' ),
                  'param_name'   => 'label',
                  'description'  => __( 'Enter text used as title of bar.', 'f_triangle' ),
                  'admin_label'  => true,
               ),
               array(
                  'type'         => 'textfield',
                  'heading'      => __( 'Value', 'f_triangle' ),
                  'param_name'   => 'value',
                  'description'  => __( 'Enter value of bar.', 'f_triangle' ),
                  'admin_label'  => true,
               ),

            ),
         ),
      )
   ) );


?>

My HTML code:

<div class="col-sm-5 wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
    <div class="our-skills">
        <h2 class="bold">Our Skills</h2>
        <div class="single-skill">
            <h3>Design</h3>
            <div class="progress">
                <div class="progress-bar progress-bar-primary six-sec-ease-in-out" role="progressbar"  data-transition="35">35%</div>
            </div>
        </div>
        <div class="single-skill">
            <h3>HTML</h3>
            <div class="progress">
                <div class="progress-bar progress-bar-primary six-sec-ease-in-out" role="progressbar"  data-transition="80">80%</div>
            </div>
        </div>
        <div class="single-skill">
            <h3>PHP</h3>
            <div class="progress">
                <div class="progress-bar progress-bar-primary six-sec-ease-in-out" role="progressbar"  data-transition="60">60%</div>
            </div>
        </div>
    </div>
</div>

My custom progress bar addon working fine in wordpress backend editor but I can't understand that how I can create shortcode for this addon to integrate it with my HTML. That's why I am unable to make it visible in frontend. So, How can I create shortcode for this addon?