Pixelated Progress Bar

Developer
Aleks
Size
2,474 Kb
Views
24,288
  1. Pixelated Progress Bar Previews
  2. Pixelated Progress Bar HTML Codes
  3. Pixelated Progress Bar CSS Codes

How do I make an pixelated progress bar?

Inspired by this: http://dribbble.com/shots/1069974-Modern-Loading-Screen. What is a pixelated progress bar? How do you make a pixelated progress bar? This script and codes were developed by Aleks on 14 October 2022, Friday.

Pixelated Progress Bar Previews
IQ Test

Pixelated Progress Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixelated Progress Bar</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #0B0B0B; overflow: hidden;
}
#center { width: 600px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -50px; background: rgba(0,0,0,1); border: 2px solid rgba(255,255,255,1); border-radius: 5px; box-shadow: 0px 0px 10px 5px rgba(255,255,255,0.2);
}
#main { width: 200px; height: 40px; background: #92C81A; float: left; animation: stretch 5s infinite linear;
}
.row { height: 10px; width: 400px; float: left; display: inherit; animation: squeeze 5s infinite linear;
}
.sq { height: 10px; width: 10px; float: left;
}
#sq-2 { background: #4A672F;}
#sq-3 { background: #1D2019;}
#sq-6 { background: #2C341C;}
#sq-1, #sq-5, #sq-9 { background: #74B215;
}
#sq-4, #sq-8, #sq-12 { background: #7BC415;
}
#sq-7, #sq-10, #sq-11 { background: #92C81A;
}
@keyframes stretch {	0% {width: 200px;} 25% {width: 280px;} 50% {width: 360px;} 75% {width: 240px;}	100% {width: 200px;}
}
@keyframes squeeze {	0% {width: 400px;} 25% {width: 320px;} 50% {width: 140px;} 75% {width: 360px;}	100% {width: 400px;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="center"> <div id="main"></div> <div class="row" id="r-one"> <span class="sq" id="sq-1"></span> <span class="sq" id="sq-2"></span> <span class="sq" id="sq-3"></span> </div> <div class="row" id="r-two"> <span class="sq" id="sq-4"></span> <span class="sq" id="sq-5"></span> <span class="sq" id="sq-6"></span> </div> <div class="row" id="r-three"> <span class="sq" id="sq-7"></span> <span class="sq" id="sq-8"></span> <span class="sq" id="sq-9"></span> </div> <div class="row" id="r-four"> <span class="sq" id="sq-10"></span> <span class="sq" id="sq-11"></span> <span class="sq" id="sq-12"></span> </div>
</div>
</body>
</html>

Pixelated Progress Bar - Script Codes CSS Codes

body { background: #0B0B0B; overflow: hidden;
}
#center { width: 600px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -50px; background: rgba(0,0,0,1); border: 2px solid rgba(255,255,255,1); border-radius: 5px; box-shadow: 0px 0px 10px 5px rgba(255,255,255,0.2);
}
#main { width: 200px; height: 40px; background: #92C81A; float: left; animation: stretch 5s infinite linear;
}
.row { height: 10px; width: 400px; float: left; display: inherit; animation: squeeze 5s infinite linear;
}
.sq { height: 10px; width: 10px; float: left;
}
#sq-2 { background: #4A672F;}
#sq-3 { background: #1D2019;}
#sq-6 { background: #2C341C;}
#sq-1, #sq-5, #sq-9 { background: #74B215;
}
#sq-4, #sq-8, #sq-12 { background: #7BC415;
}
#sq-7, #sq-10, #sq-11 { background: #92C81A;
}
@keyframes stretch {	0% {width: 200px;} 25% {width: 280px;} 50% {width: 360px;} 75% {width: 240px;}	100% {width: 200px;}
}
@keyframes squeeze {	0% {width: 400px;} 25% {width: 320px;} 50% {width: 140px;} 75% {width: 360px;}	100% {width: 400px;}
}
Pixelated Progress Bar - Script Codes
Pixelated Progress Bar - Script Codes
Home Page Home
Developer Aleks
Username achudars
Uploaded October 14, 2022
Rating 4.5
Size 2,474 Kb
Views 24,288
Do you need developer help for Pixelated Progress Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aleks (achudars) Script Codes
Name
Harley Quinn in pure CSS
Do not forget
Envelope with a Letter
Gem Fox
Diagonally-cut Search and Login Form
Ubuntu OS logo
Minimal Menu
Minimal White Audio Player
Stylish and Dark Login Form
Upload Form with a Grumpy Cat
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!