/    Sign up×
Community /Pin to ProfileBookmark

Progress Tracker Bar

Copy linkTweet thisAlerts:
Jan 13.2012

I created this progress tracker bar, but its using specified widths. how can i make this fluid in case i have a section that has 3 steps or 5 steps as opposed to 4? currently im just using left floating divs for the content area and spans for the ends. is there an easier way to make this bar scalable?

i’ve attached a screenshot

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@bionoidJan 13.2012 — Are you using images for the arrow heads or is completely CSS driven?
Copy linkTweet thisAlerts:
@absolutmgd13authorJan 13.2012 — the arrow heads are images. i've place them as span background images between the content divs.
Copy linkTweet thisAlerts:
@bionoidJan 13.2012 — Hmmm, took longer than I thought ?

There are examples on its use, hope you enjoy.
Copy linkTweet thisAlerts:
@absolutmgd13authorJan 16.2012 — you are a genius. thanks so much. i wish i was that versed in javascript.
Copy linkTweet thisAlerts:
@bionoidFeb 03.2012 — Hi,

As per our previous discussion... the progress segments can now be individually colored for both states.

In order to achieve this I could no longer use an image for the arrow heads, they are now done with CSS.

Hope you like it.
×

Success!

Help @absolutmgd13 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...