Skip to content

Commit 89a2dc1

Browse files
cvmpathakcvmpathak
committed
Day 19 Project - Animated Progress Bars
1 parent 273e4b3 commit 89a2dc1

File tree

4 files changed

+298
-0
lines changed

4 files changed

+298
-0
lines changed

‎19 - Animated Progress Bars/_README_FreeCodeCollegeTrial.pdf

433 KB
Binary file not shown.

‎19 - Animated Progress Bars/final.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
/* ==========================================
2+
FINAL.CSS
3+
These are the final styles for the project.
4+
5+
Course: CSS3 in 30 Days
6+
Author: Brad Hussey
7+
Website: codecollege.ca
8+
========================================== */
9+
10+
11+
/* =========================
12+
PROGRESS BARS #1
13+
========================= */
14+
.final__animation-bar-1 {
15+
position: relative;
16+
display: block;
17+
padding: 5px;
18+
font-size: 16px;
19+
line-height: 16px;
20+
border-radius: 30px;
21+
background: rgba(0, 0, 0, 0.1);
22+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
23+
}
24+
.final__animation-bar-1 span {
25+
position: relative;
26+
display: inline-block;
27+
vertical-align: middle;
28+
height: 20px;
29+
border-radius: 10px 0 0 10px;
30+
overflow: hidden;
31+
background-color: #f56982;
32+
background-size: 100%;
33+
background-image: linear-gradient(to bottom, #f2395a, #b90c2b);
34+
animation: progress-anim-1 10s infinite linear;
35+
}
36+
.final__animation-bar-1 span:after {
37+
position: absolute;
38+
top: 0;
39+
left: 0;
40+
right: 0;
41+
bottom: 0;
42+
content: "";
43+
background-size: 100%;
44+
background-image: linear-gradient(45deg, #ffffff 25%,
45+
rgba(0, 0, 0, 0) 25%,
46+
rgba(0, 0, 0, 0) 50%,
47+
#ffffff 50%,
48+
#ffffff 75%,
49+
rgba(0, 0, 0, 0) 75%,
50+
rgba(0, 0, 0, 0));
51+
background-size: 30px 30px;
52+
opacity: 0.3;
53+
animation: progress-anim-1-after 0.5s infinite linear;
54+
}
55+
56+
57+
@-webkit-keyframes progress-anim-1 {
58+
0% {
59+
width: 20%;
60+
}
61+
50% {
62+
width: 80%;
63+
}
64+
100% {
65+
width: 20%;
66+
}
67+
}
68+
@keyframes progress-anim-1 {
69+
0% {
70+
width: 20%;
71+
}
72+
50% {
73+
width: 80%;
74+
}
75+
100% {
76+
width: 20%;
77+
}
78+
}
79+
@-webkit-keyframes progress-anim-1-after {
80+
0% {
81+
background-position: 0 100%;
82+
}
83+
100% {
84+
background-position: 30px 100%;
85+
}
86+
}
87+
@keyframes progress-anim-1-after {
88+
0% {
89+
background-position: 0 100%;
90+
}
91+
100% {
92+
background-position: 30px 100%;
93+
}
94+
}
95+
96+
/* =========================
97+
PROGRESS BARS #2
98+
========================= */
99+
.final__animation-bar-2 {
100+
position: relative;
101+
display: block;
102+
font-size: 16px;
103+
line-height: 16px;
104+
background: rgba(0, 0, 0, 0.1);
105+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
106+
}
107+
.final__animation-bar-2 span {
108+
position: relative;
109+
display: inline-block;
110+
vertical-align: middle;
111+
height: 20px;
112+
background-color: #00e6e7;
113+
background-size: 100%;
114+
background-image: linear-gradient(to bottom, #00b3b4, #008081);
115+
animation: progress-anim-2 10s infinite ease;
116+
}
117+
.final__animation-bar-2 span:before {
118+
position: absolute;
119+
right: 0;
120+
bottom: 100%;
121+
display: inline-block;
122+
width: 0;
123+
height: 0;
124+
border: 10px solid transparent;
125+
border-right-width: 0;
126+
border-bottom-width: 0;
127+
border-top-color: rgba(0, 0, 0, 1);
128+
content: "";
129+
}
130+
.final__animation-bar-2 span:after {
131+
position: absolute;
132+
right: 0;
133+
bottom: calc(100% + 5px);
134+
z-index: 1;
135+
display: inline-block;
136+
content: attr(data-label);
137+
padding: 5px;
138+
border-radius: 3px;
139+
font-size: 0.8em;
140+
background-color: rgba(0, 0, 0, 1);
141+
color: #FFFFFF;
142+
}
143+
144+
145+
@-webkit-keyframes progress-anim-2 {
146+
0% {
147+
width: 20%;
148+
}
149+
50% {
150+
width: 100%;
151+
}
152+
100% {
153+
width: 20%;
154+
}
155+
}
156+
@keyframes progress-anim-2 {
157+
0% {
158+
width: 20%;
159+
}
160+
50% {
161+
width: 100%;
162+
}
163+
100% {
164+
width: 20%;
165+
}
166+
}

‎19 - Animated Progress Bars/index.html

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!--
2+
Message from Brad:
3+
Thanks for watching CSS3 in 30 Days! You're awesome.
4+
Want more fun design & coding courses? Check out my website.
5+
6+
https://codecollege.ca
7+
(it's free to start)
8+
-->
9+
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<title>Animated Progress Bars | Code 30 Things in 30 Days with CSS3</title>
15+
16+
<!-- NORMALIZE CSS -->
17+
<link rel="stylesheet" href="../_theme-styles/normalize.css">
18+
19+
<!-- PROJECT THEME CSS -->
20+
<link rel="stylesheet" href="../_theme-styles/theme.css">
21+
22+
<!-- FINAL PROJECT CSS (use for reference) -->
23+
<link rel="stylesheet" href="final.css">
24+
25+
<!-- SANDBOX CSS (this is your file!) -->
26+
<link rel="stylesheet" href="sandbox.css">
27+
28+
<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed" rel="stylesheet">
29+
</head>
30+
<body>
31+
<h1><small>Day #19</small> Animated Progress Bars</h1>
32+
33+
34+
35+
<div class="sandbox">
36+
<h2>Sandbox <small>This is where you play</small></h2>
37+
<div class="content">
38+
39+
<p><strong>Instructions:</strong> Create CSS only progress bars that animate below!</p>
40+
41+
<section>
42+
43+
<h4>Example #1</h4>
44+
45+
<div class="animation-bar-1">
46+
<span style="width:60%"></span>
47+
</div>
48+
49+
</section>
50+
51+
<section>
52+
53+
<h4>Example #2</h4>
54+
55+
<div class="animation-bar-2">
56+
<span data-label="Loading"></span>
57+
</div>
58+
59+
</section>
60+
61+
</div>
62+
</div>
63+
64+
<div class="final-result">
65+
<h2>Final Result <small>Use this for reference!</small></h2>
66+
<div class="content">
67+
68+
<section>
69+
70+
<h4>Example #1</h4>
71+
72+
<div class="final__animation-bar-1">
73+
<span style="width:60%"></span>
74+
</div>
75+
76+
</section>
77+
78+
<section>
79+
80+
<h4>Example #2</h4>
81+
82+
<div class="final__animation-bar-2">
83+
<span data-label="Loading"></span>
84+
</div>
85+
86+
</section>
87+
88+
</div>
89+
</div>
90+
91+
<div class="info">
92+
<h2>Information <small>About this lesson</small></h2>
93+
<h3>What are we making?</h3>
94+
<p>Fun &amp; fancy ways to create CSS only progress bars!</p>
95+
96+
<h3>Where can I use it?</h3>
97+
<p>In your websites, client projects and applications as a way to display loading content, form completion progress, or other interesting ways to enhance the User Experience!</p>
98+
99+
<h3>How compatible are these styles with major browsers?</h3>
100+
<p>Check the CSS3 styles from your stylesheet <a href="http://caniuse.com/">on this website.</a> It allows you to see the compatibility of every CSS style with major browser.</p>
101+
102+
</div>
103+
104+
<footer>
105+
<div class="logo">
106+
<a href="http://codecollege.ca/" id="logo">
107+
108+
<img src="../_theme-styles/img/bggray.svg" width="60px" id="logo_bg-gray">
109+
<img src="../_theme-styles/img/bgyellow.svg" width="60px" id="logo_bg-yellow">
110+
<img src="../_theme-styles/img/codecollegelogo.svg" width="60px" id="logo_codecollege">
111+
112+
<!-- <img src="../_theme-styles/img/codecollegelogo.png" alt="Learn to Code at CodeCollege.ca" height="60px"> -->
113+
114+
</a>
115+
</div>
116+
<div class="made-by">
117+
Made by <a href="http://bradhussey.ca/">Brad Hussey</a>
118+
</div>
119+
<div class="course">
120+
<a href="http://codecollege.ca/">Code 30 things in 30 days with CSS3</a>
121+
</div>
122+
<div class="copyright">
123+
&copy;2018 Brightside Studios Inc.
124+
</div>
125+
</footer>
126+
</body>
127+
</html>

‎19 - Animated Progress Bars/sandbox.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* ========================================
2+
3+
CODE YOUR STYLES BELOW!
4+
5+
====================================== */

0 commit comments

Comments
 (0)