Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Loading & Progress Bars >> Striped Progress Bars


Code Snippet </> Info


Snippet Name: Striped Progress Bars

Description: Add some snazzy color striped progress bars to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
Example: View Code Demo

Note:

Author: Galen Gidman

Last Modified: 2015-08-26 22:41:33

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <head> <title>HTML5 CSS3 Striped Progress Bars</title> <style> /* Begin HTML5 CSS3 Striped Progress Bars */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Galen Gidman : http://galengidman.com/2010/12/20/css3-progress-bars : Creative Commons License == */ @import url(http://fonts.googleapis.com/css?family=Droid+Serif); *{margin:0;padding:0} body{width:640px;margin:auto;padding:100px 0 50px 0;background:#222; color:#ccc;} #container{font:16px/24px 'Droid Serif',Georgia,serif;text-align:center;color:#fff;text-shadow:0 1px 0 #000} h1{font-size:36px;line-height:36px} h3{margin-top:50px} a{color:#fff} #bars-container{margin:50px 0} .progress-bar{float:left;margin:10px 0} .alt{float:right} .clear{clear:both} /* progress bar base */ .progress-bar { width:300px; height:24px; padding:4px; background-color:#191919; border-radius:16px; -webkit-border-radius:16px; -moz-border-radius:16px; box-shadow:inset 0 1px 2px #000, 0 1px 0 #2b2b2b; -webkit-box-shadow:inset 0 1px 2px #000, 0 1px 0 #2b2b2b; -moz-box-shadow:inset 0 1px 2px #000, 0 1px 0 #2b2b2b; } /* code for the inner (colorful) part of the bar */ .progress-bar:before { content:''; display:block; position:absolute; width:200px; height:24px; background:#999; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000; -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000; -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000; } /* code to stripe the bars */ .progress-bar:after { content:'|||||||||||||'; display:block; position:absolute; width:200px; height:24px; overflow:hidden; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; transform:skewX(-30deg); -webkit-transform:skewX(-30deg); -moz-transform:skewX(-30deg); -o-transform:skewX(-30deg); font:bold 120px/80px sans-serif; letter-spacing:-6px; color:#000; opacity:0.06; } /* code for the colors */ .blue:before {background:#099;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));background:-moz-linear-gradient(top, #099, #006A6B);} .pink:before {background:#f09;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f36), to(#AC2246));background:-moz-linear-gradient(top, #f36, #AC2246);} .green:before {background:#7EBD01;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));background:-moz-linear-gradient(top, #7EBD01, #568201);} .orange:before {background:#f90;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f90), to(#f60));background:-moz-linear-gradient(top, #f90, #f60);} </style> </head> <body> <div id="container"> <h1>CSS3 Striped Progress Bars</h1> <div id="bars-container"> <div class="progress-bar blue"></div> <div class="progress-bar orange alt"></div> <div class="progress-bar green"></div> <div class="progress-bar pink alt"></div> <div class="clear"></div> </div> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_153.html">Striped Progress Bars</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library