Home > Article > Web Front-end > How to create a colored progress bar style using CSS3

How to create a colored progress bar style using CSS3

不言Original: 2018-06-20 17:59:342563browse

This article mainly introduces how to use CSS3 to create a color progress bar style. It has a certain reference value. Now I share it with you. Friends in need can refer to

Using CSS3's border-radius, Box-shadow, transition, -moz-linear-gradient, -webkit-gradient and other styles can complete a fashionable progress bar. Here we look at a few CSS3 code examples for making colored progress bar styles:

1. Create a static purple stripe progress bar
html code:

<body>
<p class="progress-bar purple"> <span style="width:40%;"></span> </p>
</body>

css code:

body {   
 background-color:#333;   
}   
.progress-bar {   
 background-color:#222;   
 border-radius:3px;   
 width:300px;   
 height:24px;   
 padding:5px;   
 margin:50px;   
 border-bottom:1px solid #444;   
 box-shadow:inset 0 0 2px 0 #000;   
}   
.progress-bar span {   
 display:inline-block;   
 width:140px;   
 height:24px;   
        border-radius:2px;   
 box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
 -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
}   
.purple span{   
 background-color:#F09;   
 background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);   
 background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));   
 background-size:16px 16px;   
}

The final effect is as shown below:
2016623121249918.jpg (340×70)

2. Create a static blue progress bar
html code:

<p class="progress-bar orange"> <span style="width:60%;"></span> </p>

css code:

.orange span{   
 background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));   
 background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   
}

The final effect is as shown below:
2016623121331800.jpg (330×50)

##3. Production Static green progress bar
html code:

<p> <span style="width:80%;"></span> </p>

css code:

.green span{   
 background-color:#00ff24;   
 box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;   
 -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
 -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
}

The final effect is as shown below:

2016623121411191.jpg (325×43)

4. Add dynamic effects to the purple stripes
css code:

.purple span:hover{   
 -webkit-animation:animate-stripes 3s linear infinite;   
 -moz-animation:3s linear 0s normal none infinite animate-stripes;   
}   
@-webkit-keyframes animate-stripes {   
0% {background-position: 0 0;} 100% {background-position: 60px 0;}   
}   
@-moz-keyframes animate-stripes {   
0% {background-position: 0 0;} 100% {background-position: 60px 0;}   
}

Mouseover After going up, dynamic effects will appear.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use CSS3 to simulate the IOS sliding switch effect

Implementation of CSS3 and HTML5 web page loading progress bar

The above is the detailed content of How to create a colored progress bar style using CSS3. For more information, please follow other related articles on the PHP Chinese website!

php html5 css css3 html webkit border transition ios

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement CSS3 custom scroll bar styleNext article：How to implement CSS3 custom scroll bar style

See more

How to create a colored progress bar style using CSS3

Related articles