# CSS Skill Bars
**URL:** https://discourse.softpress.com/t/css-skill-bars/22940
**Category:** Off Topic
**Created:** [December 21, 2015, 9:49pm UTC](https://discourse.softpress.com/t/css-skill-bars/22940 "2015-12-21T21:49:39Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@The\_Big\_Erns](https://discourse.softpress.com/u/The_Big_Erns)
#### Post date: [December 21, 2015, 9:49pm UTC](https://discourse.softpress.com/t/css-skill-bars/22940/1 "2015-12-21T21:49:39Z")
I’m updating my online cv this week and I was thinking about putting in some of those skill measure bars… like those you find on fancy websites. I don’t understand how they are measured or what truly useful information they convey… but they look cool. I guess.
So I found an example online, tore it down and rebuilt it from the ground up. It was originally an unordered list, which I have an example of the rebuilt version. I eventually transformed it into a data list because that made better semantic sense to me.
Warning, this is my own hand-coded example file, heavily commented. There is no Freeway file to download… although the source code can certainly be extracted using your browser and reverse-engineer into Freeway. If you can benefit from it, then cool. I’m sharing this because Karma told me to.
[http://cssway.thebigerns.com/workbench/css-skill-bars/](http://cssway.thebigerns.com/workbench/css-skill-bars/)
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...
---
### Author:  [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)
#### Post date: [December 21, 2015, 11:19pm UTC](https://discourse.softpress.com/t/css-skill-bars/22940/2 "2015-12-21T23:19:07Z")
> I’m sharing this because Karma told me to.
Glad you are paying attention to your Karma - maybe Santa will reward you for your generosity?
D
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)
---
### Author:  [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)
#### Post date: [December 22, 2015, 2:15pm UTC](https://discourse.softpress.com/t/css-skill-bars/22940/3 "2015-12-22T14:15:13Z")
Hi Ernie,
amazing thing, thanks for sharing.
Naturally well worth to test and re-construct this immediately in Freeway:
[https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/skillbar.html](https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/skillbar.html)
The tricky thing for now would be figuring out which classes are required and which not (from your original script). Furthermore which of the remaining styles could be transported into the FW-file natively.
As I said elsewhere:
“Classes are the new Actions”
If I find some time, I’ll try to simplify this (I’m under the impression that the data and animation styles, respectively the keyframe animation is even enough)
Cheers
Thomas
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...
---
### Author:  [@The\_Big\_Erns](https://discourse.softpress.com/u/The_Big_Erns)
#### Post date: [December 22, 2015, 4:37pm UTC](https://discourse.softpress.com/t/css-skill-bars/22940/4 "2015-12-22T16:37:11Z")
> [https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/skillbar.html](https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/skillbar.html)
Very nicely done, Thomas!
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)
---
### Author:  [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)
#### Post date: [December 28, 2015, 10:28am UTC](https://discourse.softpress.com/t/css-skill-bars/22940/5 "2015-12-28T10:28:47Z")
Hi Ernie,
the pretty fair question for now would be:
“How to reveal the animation on page scroll?” Or is this kind of unnecessary?
Cheers
Thomas
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...
---
### Author:  [@The\_Big\_Erns](https://discourse.softpress.com/u/The_Big_Erns)
#### Post date: [December 29, 2015, 4:04am UTC](https://discourse.softpress.com/t/css-skill-bars/22940/6 "2015-12-29T04:04:06Z")
Thomas, here is a quick jQuery script to do this-- it watches the viewport for the `.bar` class, then adds another class to the html for the animation. It only works on the first appearance of the target class then ignores all subsequent appearances, basically only allowing animating one chart.
[http://cssway.thebigerns.com/workbench/css-skill-bars/progress-bar-test2.html](http://cssway.thebigerns.com/workbench/css-skill-bars/progress-bar-test2.html)
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...
---
### Author:  [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)
#### Post date: [December 29, 2015, 9:32am UTC](https://discourse.softpress.com/t/css-skill-bars/22940/7 "2015-12-29T09:32:40Z")
Hi Ernie,
cool - this works.
I tried a second bar going a slightly different way:
One of my “I have it anyway included” is [mynameismatthieu.com - contact with domain owner | Epik.com](http://mynameismatthieu.com/WOW/index.html). This is because of the animate.css library. WOW is obviously as well watching at the animation (yeah - it is made for). Applying the class of wow to the indicator was enough. Unfortunately delay (or others) won’t work.
Another downside (if it is one):
Only one animation each page load, while your attempt re-starts the animation whenever you scroll to.
Whatsoever - very nice journey, thanks for this.
Cheers
Thomas
* * *
offtopic mailing list
email@hidden
Update your subscriptions at:
> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...