CSS Learning notes 2--super Cool progress bar

1, continue to learn CSS, today I made a progress bar example, through this example to learn some CSS properties. Learn the experience of the CSS these days I also want to say that it is really unreasonable to learn, because there are too many attributes, although the syntax is simple, but want to do a specific page, really is not easy. So the beginner is still looking for examples of similar functions, and then follow the imitation, through the addition and deletion of attributes to see the properties, memory is also easy, I have not found a better way to learn CSS. But the way to look at attributes is not right, or to practice more, to understand the essence of CSS.

<--The CSS Code of the progress bar-->*{box-sizing:Border-box;}HTML{Height:100%;}Body{background:#efeeea;background:linear-gradient (#f9f9f9, #cecbc4);background:-moz-linear-gradient (#f9f9f9, #cecbc4);background:-webkit-linear-gradient (#f9f9f9, #cecbc4);background:-o-linear-gradient (#f9f9f9, #cecbc4);Color:#757575;font-family:"Helveticaneue-light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-serif;text-align:Center;}H1, P{padding:0;margin:0;}. Wrapper{width:350px;margin:200px Auto;}. Wrapper. Load-bar{width:100%;Height:25px;Border-radius:25px;background:#dcdbd7;position:relative;Box-shadow:0 1px 0 rgba (255, 255, 255, 0.8), inset 0 2px 3px rgba (0, 0, 0, 0.2);}. Wrapper. Load-bar-inner{Height:60%;width:0%;Border-radius:Inherit;position:relative;Top:5px;background:#ffa042;background:linear-gradient (#ffa042, #ffa042);background:-moz-linear-gradient (#ffa042, #ffa042);background:-webkit-linear-gradient (#ffa042, #ffa042);background:-o-linear-gradient (#ffa042, #ffa042);Box-shadow:inset 0 1px 0 rgba (255, 255, 255, 1), 0 1px 5px rgba (0, 0, 0, 0.3), 0 4px 5px rgba (0, 0, 0, 0.3);Animation:Loader 10s linear infinite;-moz-animation:Loader 10s linear infinite;-webkit-animation:Loader 10s linear infinite;-o-animation:Loader 10s linear infinite;}. Wrapper #counter{position:Absolute;background:#ffa042;background:linear-gradient (#ffa042, #ffa042);background:-moz-linear-gradient (#ffa042, #ffa042);background:-webkit-linear-gradient (#ffa042, #ffa042);background:-o-linear-gradient (#ffa042, #ffa042);padding:5px 10px;Border-radius:0.4em;Box-shadow:inset 0 1px 0 rgba (255, 255, 255, 1), 0 2px 4px 1px rgba (0, 0, 0, 0.2), 0 1px 3px 1px rgba (0, 0, 0, 0.1); Left:-25px;Top:-50px;font-size:12px;Font-weight:Bold;width:44px;Animation:counter 10s linear infinite;-moz-animation:counter 10s linear infinite;-webkit-animation:counter 10s linear infinite;-o-animation:counter 10s linear infinite;}. Wrapper #counter: after{content: "";position:Absolute;width:8px;Height:8px;background:#cbcbd3;Transform:Rotate (45deg);-moz-transform:Rotate (45deg);-webkit-transform:Rotate (45deg);-o-transform:Rotate (45deg); Left:50%;Margin-left:-4px;Bottom:-4px;Box-shadow:3px 3px 4px rgba (0, 0, 0, 0.2), 1px 1px 1px 1px rgba (0, 0, 0, 0.1);Border-radius:0 0 3px 0;}. Wrapper H1{font-size:28px;padding:20px 0 8px 0;}. Wrapper P{font-size:13px;}@keyframes Loader{From {width:0%;} to{width:100%;}} @-moz-keyframes Loader{From {width:0%;} to{width:100%;}} @-webkit-keyframes Loader{From {width:0%;} to{width:100%;}} @-o-keyframes Loader{From {width:0%;} to{width:100%;}} @keyframes Counter{From { left:-25px;} to{ Left:323px;}} @-moz-keyframes Counter{From { left:-25px;} to{ Left:323px;}} @-webkit-keyframes Counter{From { left:-25px;} to{ Left:323px;}} @-o-keyframes Counter{From { left:-25px;} to{ Left:323px;}}

<--the code for the HTML portion of the progress bar-->
Execution Result:
Next, let me introduce some of the properties I didn't use before:
(1) linear-gradient
Linear-gradient
CSS Learning notes 2--super Cool progress bar