Category: JavaScript

How-To: Make Animated Progress Circles Using Circliful

A jQuery Plugin for Making Circles

My last post about the jQuery plugin Circliful was pretty popular. So, here’s another, detailing how to actually use Circliful.

Circliful has a number of options that can be set as data attributes. Data attributes are the primary method for setting various options, such as the circle background color, fill color, and the percentage. All of the possible data attributes are available in the README on GitHub.

Using Circliful is similar to every other jQuery plugin. Just make sure you’re loading up jQuery prior to loading the Circliful JavaScript.

1. Include Circliful JavaScript and CSS

Include the JavaScript and CSS files from Circliful just like you would any other JavaScript or CSS file.

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.circliful.min.js"></script>

2. Add an element with the necessary data attributes

This is where you can define all the data attributes that are listed in the README. I typically use an empty div with the following data attributes: data-dimension, data-text, data-info, data-width, data-fontsize, data-percent, data-fgcolor, data-bgcolor, data-fill, data-total, and data-part.

You’ll want to give your newly created element a unique ID to use as a selector in jQuery. I used circle-1 as the element ID for this example.

<div id="circle-1" class="circle" data-dimension="250" data-text="85%" data-info="Sweet" data-width="30" data-fontsize="38" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>

3. Add necessary JavaScript

This tells Circliful which element to build the circle from. We want to target the ID that we gave to our empty element/div above.

<script>
$( document ).ready(function() {
        $('#circle-1').circliful();
    });
</script>

That’s it! You should now have a circle similar to the first circle in the example below. If you have any questions, feel free to leave a comment or get in touch with me directly.

You can find the necessary JavaScript and CSS on the Circliful GitHub page. You can see an example of Circliful in the embedded pen below.

See the Pen erojh by Tyler Longren (@tlongren) on CodePen.

1+

Notejam: Easily Learn a Web Framework

The easy way to learn web frameworks

Notejam provides you with a very easy way to learn new web frameworks. All kinds of web frameworks, too:

  • PHP
  • Python
  • Ruby
  • JavaScript (node.js)

Notejam describes itself like this:

Do you know django/laravel/symfony/etc and want to try rails/flask/pyramid/etc? The easy way to start with a new framework is to compare it with frameworks you already know. The goal of the project is to help developers easily learn new frameworks by examples.

Notejam is a unified sample web application (more than just “Hello World”) implemented using different server-side frameworks. Currently most popular python, php and ruby frameworks are supported.

All implementations of Notejam are SQLite based and are launched by built-in web servers. Each implementation has steps describing how to easily install, launch, and run tests.

Notejam is developed by Serhii Komar, @komarserjio on Twitter. Notejam can be downloaded on GitHub and you can view various screenshots on GitHub, as well.

0

Circliful: A jQuery Plugin Providing Animated Progress Circles

Animated progress circles

I use something similar, but not quite as nice (these are animated progress circles) on my Work With Me page. They don’t have percentages and are just hacked together from codepen.io.

The jquery-plugin-circliful repository on GitHub is way more advanced than what I have on my Work With Me page. Cicliful provides animated progress circles, which you can see on the demo page.

Circulful is very easy to use. Just include jQuery and the Circliful JavaScript and CSS on your page:

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

Add an element to your site with a unique ID:

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

Then, to get the progress circle to appear, add this JavaScript: 

<script>
$( document ).ready(function() {
        $('#myStat').circliful();
    });
</script>

There’s a lot of optional data- attributes that you can set, as well. The entire list is below, straight from the README.

  • dimension / is the height and width of the element / default is 200px on 200px
  • text / will be deisplayed inside of the circle over the info element
  • info / will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text)
  • width / is the size of circle / default is 15px
  • fontsize / is the font size for the text element / default is 15px
  • percent / can be 1 to 100
  • fgcolor / is the foreground color of the circle / default is #556b2f
  • bgcolor / is the background color of the cicle / default is #eee
  • fill / is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle)
  • type / full or half circle for example data-type=”half” if not set the circle will be a full circle / default full circle
  • total / If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total=”750″ and data-part=”350″ and the circle will show the percentage value 36,85%
  • part
  • border / Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.
  • icon / Fontawesome icon class without the fa- before the class for example not fa-plus just plus
  • iconsize / Will set the font size of the icon.
  • iconcolor / Will set the font color of the icon.
  • animationstep / Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1

Circliful is available on GitHub, there’s also a demo. I’ll eventually switch the progress circles on my Work With Me page to use Circliful. I mostly enjoy it’s ease of customization through data- attributes.

If you need help configuring something, feel free to leave a comment. Make sure you look through the issues that have already been reported, too.

1+

jQuery Plugins For Those Who Don’t Know JavaScript

Plugins to ease development for front-end designers

I saw jQuery-Plugins repository in my GitHub Today email yesterday. I’m a sucker for collections of cool things, and this repo is just that. It’s basically a collection of simple jQuery plugins that are very easy to use, requiring little or no experience with jQuery or JavaScript.

Here’s a little from the plugin’s README:

These jQuery plugins have been created to ease the pain that some front-end designers feel when they’re trying to implement basic features with little or no JavaScript or jQuery experience.

I plan to add plugins to this repository over time that only require HTML code, data-* attributes, and the inclusion of the script in question, following the same kind of principles as the Twitter Bootstrap extensions, in so far that no coding experience should be required in order to make things work.

It looks like there’s 4 plugins included:

  1. Carousel
  2. ClassToggle
  3. Google Analytics Helper
  4. SnapSlider

The developer has plans to continue adding more simple plugins.

The examples can be seen individually, too. Here’s the Carousel plugin in action. Here’s a few ClassToggle examples. There’s also a Google Analytics Helper example, showing how to track events and URL’s.

jQuery-Plugins looks like it could be a useful set of plugins. I may actually use the Carousel plugin for an upcoming project.

These plugins will come in handy for almost anyone, frontend or backend developers. Check them out!

0

Fort.js: A Modern Progress Bar for Form Completion

Modern progress bars for your forms

Fort.js is cool. It makes adding progress bars to your forms extremely easy. It’s especially useful for signup forms, or any form where it’s nice to see how far along in the process you are.

Here’s a short description from their GitHub readme:

Modern progress bar for form completion. All you do is add the form and Fort.js’ algorithm will take care of the rest. Best of all, it’s super small.

I don’t have Fort.js in use on any public facing sites yet, but will be using it for an upcoming project involving craft beers and kegs.

Fort.js comes with four different effects: default, gradient, sections, and flash. I typically use the Sections effect, it makes it very easy to see how far along you are in the form.

I’d love Fort.js even more if changing the colors was a bit easier. Changing the progress bar colors varies depending on which effect you’re using, but it’s all documented in the README.

Fort.js and related documentation can be found on GitHub.

I found an example using Fort.js on Codepen.io the other day, have a look, it’s embedded below:

See the Pen Fort.js by Idris (@idris) on CodePen.

0