Multiple background colors with layers?
Question
I got sent some picture art by a client and I was asked to re-code this in CSS, I've created most of it but I'm struggling on how I can color the div like the actual example, here is the client's version.
Here is my version:
body { background-color: black; } .loading_bar { border: 1px solid white; width: 400px; height: 26px; border-radius: 3px; margin-left: auto; margin-right: auto; margin-top: 80px; }
<div class="loading_bar"> </div>
2 answers
solution1
2 2018-01-27 20:21:20
You can simply use linear-gradient and adjust the background-size to control the progress with no need to add extra markup:
body { background-color: black; } .loading_bar { border: 1px solid white; width: 400px; height: 26px; border-radius: 3px; margin:10px auto; background-image: linear-gradient(to bottom, #bacad3 50%, #8ca1ad 0%); background-size: calc(100% - 4px) calc(100% - 4px); background-position: 2px 2px; background-repeat: no-repeat; }
<div class="loading_bar"> </div> <div class="loading_bar" style="background-size: 10% calc(100% - 4px);"> </div> <div class="loading_bar" style="background-size: 60% calc(100% - 4px);"> </div>
solution2
0 2018-01-27 19:53:15
What I'd recommend is inserting another div into the middle of your loading bar, then styling that, as well as adding some padding to the bar. To get the desired 'two-tone' effect, you can just use a border one one side with an equal height as the element itself.
Here's a quick example:
body { background-color: black; } .loading_bar { border: 1px solid white; width: 400px; height: 26px; border-radius: 3px; margin-left: auto; margin-right: auto; margin-top: 180px; padding: 2px; } .loading-bar-center { width: 50%; background: white; height: 13px; border-bottom: 13px solid lightblue; }
<html> <head> </head> <body> <div class="loading_bar"> <div class="loading-bar-center"></div> </div> </body> </html>
You can change the colours as required, and animate the bar by just changing the width % of the loading-bar-center element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.