Header Ads

Header ADS

Progress bar element development with visual composer

 

//progessbar shortcode create




html code:

...................


  <div class="skill"><span class="skill-name">Design</span><span class="skill-perc">90%</span>

              <div class="progress">

                <div role="progressbar" data-progress="90" class="progress-bar"></div>

              </div>

            </div>



....................



php code:-

.................

//simple way te progressbar create kora.


<?php 



function commet_progress($one, $two){

$commet = shortcode_atts([


'title'   =>' ',

'p-title' =>' ',

'p-value' =>' '



], $one);



ob_start();


?>

<h1><?php echo $commet['title']; ?></h1>

  <div class="skill"><span class="skill-name"><?php echo $commet['p-title']; ?></span><span class="skill-perc"><?php echo $commet['p-value']; ?>%</span>

              <div class="progress">

                <div role="progressbar" data-progress="<?php echo $commet['p-value']; ?>" class="progress-bar"></div>

              </div>

            </div>


<?php

return ob_get_clean();



}

add_shortcode('commet_progress', 'commet_progress');




vc_map([


'name'            =>'Commet Progress Bar',

'base'            =>'commet_progress',

'icon'            =>get_template_directory_uri(). '/images/cat.png',

'description'     =>'Commet Custom box',

'params'          =>[


[


'param_name' => 'title',

'type'       =>'textfield',

'heading'    =>'Title'

  


],


[


'param_name' => 'p-title',

'type'       =>'textfield',

'heading'    =>'Bar Title'

  


],


[


'param_name' => 'p-value',

'type'       =>'textfield',

'heading'    =>'Value'

  


]



]





]);



 ?>


............................................



//progress bar advance way te create kora add bar add bar system e. and colored select kora jabe.


<?php 


function commet_progress($one, $two){
$commet = shortcode_atts([

'title'   =>' ',
'p-title' =>' ',
'p-value' =>' ',
'p-all'  =>' ',
'p-style' =>' '


], $one);


ob_start();

?>
<h1><?php echo $commet['title']; ?></h1>
<?php 

$progress = vc_param_group_parse_atts($commet['p-all']);

foreach($progress as $prog) :

?>
  <div class="skill"><span class="skill-name"><?php echo $prog['p-title']; ?></span><span class="skill-perc"><?php echo $prog['p-value']; ?>%</span>
              <div class="progress">
                <div role="progressbar" data-progress="<?php echo $prog['p-value']; ?>" class="progress-bar <?php echo $commet['p-style']; ?>"></div>
              </div>
            </div>

        <?php endforeach; ?>

<?php
return ob_get_clean();


}
add_shortcode('commet_progress', 'commet_progress');



vc_map([

'name'            =>'Commet Progress Bar',
'base'            =>'commet_progress',
'icon'            =>get_template_directory_uri(). '/images/cat.png',
'description'     =>'Commet Custom box',
'params'          =>[

[

'param_name' => 'p-style',
'type'       =>'dropdown',
'heading'    =>'Bar Style',
'value'      =>[

  'Classic' =>' ',
  'Colored' =>'colored'
    ]
  

],

[

'param_name' => 'title',
'type'       =>'textfield',
'heading'    =>'Title'
  

],

[

'param_name' => 'p-all',
'type'       =>'param_group',
'heading'    =>'Add Bar',
'params'     => [


[

      'param_name' => 'p-title',
      'type'       =>'textfield',
      'heading'    =>'Bar Title'
  

    ],

    [

      'param_name' => 'p-value',
      'type'       =>'textfield',
      'heading'    =>'Value'
  

    ]
    ]
  

],




]




]);


 ?>

.............................................

No comments

Theme images by fpm. Powered by Blogger.