Horje
Simple circle animated progress bar. It will Show any progress data by animation. Wordpress Tutorial

Noted That:

  • To install correctly this cc-circle-progress-bar.zip .
  • Fisrt Download the cc-circle-progress-bar.zip to your computer
  • Extract/Open cc-circle-progress-bar.zip to Your Computer.
  • Then, Find readme.txt file inside cc-circle-progress-bar.zip and Open readme.txt .
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the Tips Below.

Start the Tips:

1. First Download " cc-circle-progress-bar.zip " Plugin to your Local Computer. (Click Download)

2. Then, Login to your " yourdomain.com/wp-admin " Dashboard.

/stack/wp/e1593231376d7d849d2-4597-4fa3-a6ff-1eca18f72aab.png

3. Then, Click on " Plugins " + " Add New " from left sidemenu of Dashboard.

/stack/wp/e1593231378Screenshot20.png

4. Now, Click on "Upload Plugin" button.

/stack/wp/e1593231380Screenshot-2019-4-2AddPluginsHorjeWordPress.png

 

5. Now, Browse " cc-circle-progress-bar.zip "  Downloaded plugin from your computer, Where you downloaded cc-circle-progress-bar.zip According to Step – 1 Above then, click on " Install Now"

/stack/wp/e15931461531577025694plugin.png

6. Now, Click on " Active Plugin"

/stack/wp/e15932313830ca45529-bf73-4101-8178-53ae60ce549f.png

7. Then, See left sidemenu. " CC Circle Progress Bar " folder is added on left sidemenu. Now, Click on " CC Circle Progress Bar " folder.

   Noted that: If you do not see " CC Circle Progress Bar " folder on left sidemenu then, see at left sidemenu " Settings " or " Tools ".

8. Now you configure yourself oR Watch video tutorial below about  CC Circle Progress Bar Configurtions and Settings or How to work " CC Circle Progress Bar " in your WordPress site.

 

oR

After Activated Plugin According to Step-6 then,

  1. Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find " CC Circle Progress Bar " Activated Plugin from Plugin List.
  4. Then, Click on " Settings " from Plugin that is CC Circle Progress Bar
  5. Now, Edit/Add/Config the setting and Click on " Save Changes " button,
WP Plugin Setting



Guide

This section describes how to install the plugin and get it working.

Simple usage instruction:

  1. a. Upload plugin-name.php to the /wp-content/plugins/ directory.
    b. Install This plug in your WordPress Site.
    c. Activate the plugin through the ‘Plugins’ menu in WordPress.

  2. Usage [progressbar] this shortcode where you want to use it.

  3. You can control this shortcode via attributes. There is all attributes.
    id=”1? => ID of every progressbar. Default value 1 . Must change this value if you add more then one progress bar in post or page.
    dimen=”250? => Height and width. Default value 250 . You can control height and width via this.
    text=”90%” => Text in the circle. Default value 90% . Change it with your text or you can keep it blank if you don’t wanna put any text.
    info=”Photoshop” => Information of the circle, it shown under text. Default value Photoshop . Change it with your text or you can keep it blank if you don’t wanna put any text.
    width=”10? => Thickness of bar. Default value 10 . You can change it with your with your value.
    fontsize=”25? => Font size of text. Default value 25 . You can change it with your with your value.
    percent=”90? => Percent of progress. Default value 90 . You can change it with your with your value, value should be in 1 to 100.
    fgcolor=”#eee” => Foreground colour of progress. Default value #eee . You can change it with your with your value, value should be in RGB colour format start with Hash (#) .
    bgcolor=”#000? => Background colour of progress. Default value #000 . You can change it with your with your value, value should be in RGB colour format start with Hash (#) .
    fillcolor=”#000? => Fill colour of progress. Default value none . You can change it with your with your value, value should be in RGB colour format start with Hash (#) .
    type=”full” => Type of progress. Default value full . You can its value as half of full for showing half or full view of progressbar.
    border=”outline” => Border type of progress. Default value outline . You can its value as outline of inline .

  4. So, what right now? ???? It example time.
    Example 1: Without any attribute.
    [progressbar]

    Example 2: With every attribute.
    [progressbar id=”1? dimen=”250? text=”90%” info=”Photoshop” width=”10? fontsize=”25? percent=”90? fgcolor=”#eee” bgcolor=”#000? fillcolor=”#000? type=”full” border=”outline”]

    Example 3: For inline border.
    [progressbar id=”1? dimen=”250? text=”90%” info=”Photoshop” width=”10? fontsize=”25? percent=”90? fgcolor=”#eee” bgcolor=”#000? fillcolor=”#000? type=”full” border=”inline”]

    Example 4: For half circle.
    [progressbar id=”1? dimen=”250? text=”90%” info=”Photoshop” width=”10? fontsize=”25? percent=”90? fgcolor=”#eee” bgcolor=”#000? fillcolor=”#000? type=”half” border=”inline”]

  5. If you have any problem to use this plugin feel free to submit a ticket in plugin forum.

  6. You can use this in you theme by Place in your templates


progress , simple , circle , animated , show , data , animation , tutorial ,

Name

Read Article
https://develop.horje.com/learn/1434/reference