Get started with circliful CDN

MIT licensed

Circliful.js: Lightweight, customizable plugin for JS circular progress bars.

Tags:
  • circliful

Stable version

Copied!

How to start using circliful CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with circliful CDN - cdnhub.io</title>
    <style>
        #progress-container {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="progress-container"></div>
    <script src="https://cdn.cdnhub.io/circliful/2.0.17/circliful.min.js"></script>
    <script>
        const progressContainer = document.getElementById('progress-container');
        const circle = new Circles.Create({
            id: 'circliful',
            radius: 100,
            width: 200,
            height: 200,
            percent: 50, // Set initial percentage
            text: '50%',
            textColor: '#333',
            textPosition: 'outer',
            textSize: '16px',
            outerStrokeWidth: 8,
            outerStrokeColor: '#ddd',
            innerStrokeWidth: 8,
            innerStrokeColor: '#f8f8f8',
            progressBackgroundColor: '#fff',
            animation: 600, // Animation speed in ms
            animationEasing: 'easeInOutQuad' // Animation easing
        });

        circle.progress(50); // Set initial percentage

        // Update the percentage and text every second
        setInterval(() => {
            const newPercent = Math.floor(Math.random() * 101);
            circle.progress(newPercent);
            circle.text(newPercent + '%');
        }, 1000);
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions