├── README.md
├── bar.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # CSS3 Animated Loading Bar
2 |
3 | Instead of a gif use some fancy CSS to provide feedback to your user.
4 |
5 |
--------------------------------------------------------------------------------
/bar.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS3 Loading Bar
3 | * ============================================================================
4 | *
5 | * Originally created by Lee Munroe (leemunroe) in April 2012, revised by
6 | * Sacha Schmid (RadLikeWhoa) in December 2012 for 24pullrequests.
7 | *
8 | * This loading bar is thought as a replacement for a .gif loading spinner and
9 | * is created using various CSS3 techniques (e.g. box-shadow, gradients, etc.).
10 | *
11 | * Example usage:
12 |
13 | *
14 | */
15 |
16 | .bar {
17 | /**
18 | * The loading bar is centered both vertically and horizontally using
19 | * top: 50%; and left: 50%; and then pulling it back using negative margins.
20 | */
21 | position: absolute;
22 | top: 50%;
23 | left: 50%;
24 | height: 20px;
25 | width: 200px;
26 | margin-top: -10px; /* half the height */
27 | margin-left: -100px; /* half the width */
28 | background-image: -webkit-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
29 | background-image: -moz-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
30 | background-image: -o-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
31 | background-image: linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
32 | background-color: #d3d3d3;
33 | background-size: 50px 50px;
34 | border: 1px solid #ff9a1a;
35 | border-bottom-color: #e68100;
36 | border-radius: 20px;
37 | -webkit-box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
38 | box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
39 | -webkit-animation: move 2s linear infinite;
40 | -moz-animation: move 2s linear infinite;
41 | -o-animation: move 2s linear infinite;
42 | animation: move 2s linear infinite;
43 | -ms-animation-name: demo;
44 | }
45 |
46 | /**
47 | * The ::before element creates the darker box around the loading bar itself.
48 | */
49 |
50 | .bar::before {
51 | content: " ";
52 | position: absolute;
53 | top: -10px;
54 | left: -10px;
55 | right: -10px;
56 | bottom: -10px;
57 | background-color: #000;
58 | background-color: rgba(0, 0, 0, 0.1);
59 | border-radius: 20px;
60 | -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
61 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
62 | z-index: -1;
63 | }
64 |
65 | /**
66 | * Animate the stripes.
67 | */
68 |
69 | @-webkit-keyframes move {
70 | to { background-position: 50px 50px; }
71 | }
72 |
73 | @-moz-keyframes move {
74 | to { background-position: 50px 50px; }
75 | }
76 |
77 | @-o-keyframes move {
78 | to { background-position: 50px 50px; }
79 | }
80 |
81 | @-webkit-keyframes move {
82 | to { background-position: 50px 50px; }
83 | }
84 |
85 | @-ms-keyframes demo {
86 | to { background-position: 50px 50px; }
87 | }
88 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSS3 Animated Loading Bar
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------