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 Bar 2


Code Snippet </> Info


Snippet Name: Striped Progress Bar 2

Description: Add a CSS3 striped progress bar to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: Chtiwi Malek

Last Modified: 2015-08-26 22:42:34

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Striped Progress Bar</title> <style> /* Begin CSS Striped Progress Bar */ /* == 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: Chtiwi Malek : http://www.codicode.com : Creative Commons License == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} #prbar { margin:5px; width:500px; background-color:#dddddd; overflow:hidden; /* Rounded Border */ border: 1px solid #bbbbbb; -moz-border-radius: 15px; border-radius: 15px; /* Adding some shadow to the progress bar */ -webkit-box-shadow: 0px 2px 4px #555555; -moz-box-shadow: 0px 2px 4px #555555; box-shadow: 0px 2px 4px #555555; } /* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */ doesnotexist:-o-prefocus, #prbar {border-radius:0px;} #prpos { background-color:#3399ff; width:0%; height:30px; /* CSS3 Progress Bar Transitions */ transition: width 2s ease; -moz-transition: width 2s ease; -webkit-transition: width 2s ease; -o-transition: width 2s ease; -ms-transition: width 2s ease; /* CSS3 Stripes */ background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%); background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%); background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%); background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%); background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff)); background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%); background-size: 40px 40px; /* Background stripes animation */ animation: bganim 3s linear 2s infinite; -moz-animation: bganim 3s linear 2s infinite; -webkit-animation: bganim 3s linear 2s infinite; -o-animation: bganim 3s linear 2s infinite; -ms-animation: bganim 3s linear 2s infinite; } @keyframes bganim {from {background-position:0px;} to { background-position:40px;} } @-moz-keyframes bganim {from {background-position:0px;} to { background-position:40px;} } @-webkit-keyframes bganim {from {background-position:0px;} to { background-position:40px;} } @-o-keyframes bganim {from {background-position:0px;} to { background-position:40px;} } @-ms-keyframes bganim {from {background-position:0px;} to { background-position:40px;} } </style> </head> <body onload="MoveTo();"> <script type="text/javascript"> function MoveTo() { var prpos = document.getElementById('prpos'); prpos.style.width = document.getElementById('moveTo').value + "%"; } </script> <div id="content"> <h3>CSS Progress Bar</h3> <table> <tr> <td><div id="prbar"><div id="prpos"></div></div></td> </tr> <tr> <td align="center" style="padding:5px;"><input id="moveTo" value="57" style="width:30px;" />% <button onclick="MoveTo();return false;">Move</button></td> </tr> </table> <br /><br /><br /><br /><br /> <p> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_193.html">CSS Striped Progress Bar Code Snippet</a> page. ] </p> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library