PHPackages                             webcito/jquery-bs-circle-progress - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webcito/jquery-bs-circle-progress

ActiveLibrary[Utility & Helpers](/categories/utility)

webcito/jquery-bs-circle-progress
=================================

The plugin displays a process in the form of a circle using Bootstrap and jQuery.

016

Since Jan 19Pushed 2y ago1 watchersCompare

[ Source](https://github.com/ThomasDev-de/jquery-bs-circle-progress)[ Packagist](https://packagist.org/packages/webcito/jquery-bs-circle-progress)[ RSS](/packages/webcito-jquery-bs-circle-progress/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

jquery-bs-circle-progress
=========================

[](#jquery-bs-circle-progress)

The plugin displays a process in the form of a circle using Bootstrap and jQuery.

Requirements
------------

[](#requirements)

- Bootstrap >= v4.0.0 (Works with Bootstrap 5.x)
- jQuery >= 1.9

Installing
----------

[](#installing)

### Manual

[](#manual)

Download the compressed file jquery-bs-circle-progress.min.js from the dist folder. Upload it to your project and include it before the tag but after the jQuery script.

```

    // custom scripts

```

### Manual

[](#manual-1)

```
composer require webcito/jquery-bs-circle-progress:dev-main
```

### Usage

[](#usage)

#### html

[](#html)

```

```

#### javascript

[](#javascript)

```
 $('#my_first_progress').circleProgress();
```

That's it!

Plugin options
--------------

[](#plugin-options)

proptypedefaultdescriptionsizenumber200The size of the circlevaluenumber0The predefined value of progresscolorstring'primary'The color of the progress. It can be a bootstrap class ('primary', 'secondary', etc.) or a CSS property (rgb(20,20,20)).backgroundstring'transparent'The color of the background. It can be a bootstrap class ('primary', 'secondary', etc.) or a CSS property (rgb(20,20,20)).progressWidthnumbernullThe thickness of the progress bar. If no value is specified, the thickness is calculated automatically using the circle.### example

[](#example)

```
 $('selector').circleProgress({
    size: 350,
    value: 12,
    color: '#506886'
});
```

Plugin methods
--------------

[](#plugin-methods)

methodparamsdescriptionvalnumberChanges the value of progressupdateOptionsobjectRebuilds the plugin using the new options.### example

[](#example-1)

```
 $('selector').circleProgress({
    size: 350,
    value: 12,
    color: '#506886'
});

let seconds = 0;
let testInterval = null;
testInterval = setInterval(function () {
    if (seconds === 100) {
        clearInterval(testInterval)
    }
    let color;
    switch (true) {
        case seconds