css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged progress

Testing Things Out

Well, I've maxed out most of the things that I was willing to learn this year. I just need to figure out how to implement them better. I think once I figure out how to make a...

Accurate Page Loading Progress Bar

I have created Progress Bar with jQuery, HTML, CSS3 by using Navigation Timing API which provides data that can be used to measure the performance of a website. This API can provide end-to-end...


Welcome! Press ctr + left-shift + b to roll! (via atom text editor).

Picked_up = []

import random

while len(Picked_up) < 6: Picked_up.append(random.randint(0,49))

print Picked_up

Sticky Progress

Hi :) in this post we are going to talk about how to make a sticky progress


we use it in very long article to encourage people read all article.

requirements :

you need to know in css:


Semantic, single-element loading spinners with HTML & CSS



That’s it.

If there’s no value attribute on the <progress> element, it’s defined as:

[…]indeterminate, indicating that progress is being made but...

How to build an audio player with HTML5 and the Progress element

HTML5 introduces built-in media support with the audio tag, which makes it very easy to embed media straight into any HTML document with limited code. It comes with built in browser controls, if...