CODEWITHSUNDEEP
jqueryhtmlcss
Facundo La Rocca
Facundo La Rocca

Reputation: 3866

CSS transition color progressive

Background:

This is what I'm looking for:

Progressive effect

But I can't figure out how to get this effect without iterating elements through JQuery.

This is what I have right now, as you can see, It is very distant what I'm expecting. To try it just check/uncheck the checkbox.

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
  background-color: blue;
  transition: all 500ms ease-in 500ms;
}
<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Questions:

  1. Can I achieve it using pure CSS?
  2. If the only possible way is to use JQuery, what should I keep in my mind to reach a good solution?

Upvotes: 3

Views: 659

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

While this method may be a bit extensive, it should work for your purpose.

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
    background-color: blue;
}

#check:checked ~ .dot.chk:nth-child(2) {
  transition: all 500ms ease-in 300ms;
}

#check:checked ~ .dot.chk:nth-child(3) {
  transition: all 500ms ease-in 500ms;
}

#check:checked ~ .dot.chk:nth-child(4) {
  transition: all 500ms ease-in 700ms;
}

#check:checked ~ .dot.chk:nth-child(5) {
  transition: all 500ms ease-in 900ms;
}

#check:checked ~ .dot.chk:nth-child(6) {
  transition: all 500ms ease-in 1100ms;
}

#check:checked ~ .dot.chk:nth-child(7) {
  transition: all 500ms ease-in 1300ms;
}

#check:checked ~ .dot.chk:nth-child(8) {
  transition: all 500ms ease-in 1500ms;
}

#check:checked ~ .dot.chk:nth-child(9) {
  transition: all 500ms ease-in 1700ms;
}

#check:checked ~ .dot.chk:nth-child(10) {
  transition: all 500ms ease-in 1900ms;
}

#check:checked ~ .dot.chk:nth-child(11) {
  transition: all 500ms ease-in 2100ms;
}
<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

By making use of nth-child(n), you can specify a specific transition for each dot. By changing the fourth parameter, transition-delay, you can achieve the look you're after.

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78520

Considering you have a finite number of dots (10 in this case), I would use adjacent child selectors to apply a transition delay.

body {
  background: #f6f6f6;
}


.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  flex: 1 auto;
  background: #e2e2e2;
  border-radius: 100%;
  margin-right: 10px;
  transition: all 500ms ease-in;
}

.dot:after {
  content: '';
  display:inline-block;
  vertical-align: top;
  padding-top: 100%;
}

#check:checked ~
.dot + .dot
{transition-delay: 500ms;}
#check:checked ~
.dot + .dot + .dot
{transition-delay: 1000ms;}
#check:checked ~
.dot + .dot + .dot + .dot
{transition-delay: 1500ms;}
#check:checked ~
.dot + .dot + .dot + .dot + .dot
{transition-delay: 2000ms;}
#check:checked ~
.dot + .dot + .dot + .dot + .dot + .dot
{transition-delay: 2500ms;}
#check:checked ~
.dot + .dot + .dot + .dot + .dot + .dot + .dot
{transition-delay: 3000ms;}
#check:checked ~
.dot + .dot + .dot + .dot + .dot + .dot + .dot + .dot
{transition-delay: 3500ms;}
#check:checked ~
.dot + .dot + .dot + .dot + .dot + .dot + .dot + .dot + .dot
{transition-delay: 4000ms;}
#check:checked ~
.dot + .dot + .dot + .dot + .dot + .dot + .dot + .dot + .dot + .dot
{transition-delay: 4500ms;}

#check:checked ~ .dot.chk {
  background-color: #4ca5d0;
}
<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Upvotes: 1

acesmndr
acesmndr

Reputation: 8505

Not exactly what you wanted but you can use the nth-of-type to add different transition delay to different elements. Hope it helps.

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
  background-color: blue;
  
}

.dot.chk:nth-of-type(1){
  transition: all 200ms ease-in-out 0ms;
}
.dot.chk:nth-of-type(2){
  transition: all 200ms ease-in-out 200ms;
}
.dot.chk:nth-of-type(3){
  transition: all 200ms ease-in-out 400ms;
}
.dot.chk:nth-of-type(4){
  transition: all 200ms ease-in-out 600ms;
}
.dot.chk:nth-of-type(5){
  transition: all 200ms ease-in-out 800ms;
}
.dot.chk:nth-of-type(6){
  transition: all 200ms ease-in-out 900ms;
}
.dot.chk:nth-of-type(7){
  transition: all 200ms ease-in-out 1000ms;
}
<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Upvotes: 2

Related Questions