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.

129

Since May 28Pushed 1mo 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 today

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.animatedbooltrueEnables animation when the progress is rendered or updated. Set to `false` to disable transitions.### 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