creocodigo
Checkbox Switch Toggle Animation

Checkbox Switch Toggle Animation

Shikhar Baniya's photo
Shikhar Baniya
·

3 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to create a Toggle Animation which shows the status as offline and online. Toggle switches are the most used input tag after text. It allows user to enable or disable some functionality or for just a YES or NO question. This is an animation for online and offline mode. Looks great, doesn't it?

Here's a preview -

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Checkbox switch toggle Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="checkbox">
  <input type="checkbox" name="login" checked>
  <div></div>
  <label for="login">
    <span class="on">On</span>
    <span class="off">Off</span>line
  </label>
</div>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;500&display=swap');

* {
  font-family: 'Roboto Mono', monospace;
}
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #444757;
  overflow: hidden;
  margin:0; 
  box-sizing: border-box;
}
.checkbox {
  cursor: pointer;
  position: relative;
  width: 128px;
}
.checkbox > input, .checkbox > div, .checkbox > label {
  display: inline-block;
  vertical-align: top;
  color: white;
}
.checkbox > label > span.on{
  color: #40b754
}
.checkbox > label > span.off{
  color: rgb(238, 79, 79)
}

.checkbox > div {
  --switch-width: 50px;
  --switch-height: 22px;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-height);
  transition: background-color .3s;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
input:checked ~ div {
  transition: background-color .3s;
}
input:not(:checked) ~ div {
  transition: background-color .3s .3s;
}
.checkbox > div::before, .checkbox > div::after {
  content: '';
  position: absolute;
  top: 0;
  width: var(--switch-height);
  height: var(--switch-height);
  background-color: white;
  border-radius: 50%;
}
.checkbox > div::before {
  left: 0;
}
.checkbox > div::after {
  right: 0;
}
input:checked ~ div::before {
  transform: scale(.8) translateY(50px);
}

input:checked ~ div::after {
  transform: scale(.8) translateY(0);
}

input:not(:checked) ~ div::before {
  transform: scale(.8) translateY(0px);
}

input:not(:checked) ~ div::after {
  transform: scale(.8) translateY(-50px);
}

input:not(:checked) ~ div {
  background-color: lightgray;
}

input:checked ~ div {
  background-color: #40b754;
}

input:not(:checked) ~ div {
  background-color: rgb(238, 79, 79);
}

.checkbox > input {
  opacity: 0;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  margin: 0;
  height: 100%;
  z-index: 19;
}

.checkbox > label {
  position: relative;
  padding-left: 29px;
  transition: padding-left .3s;
  overflow: hidden;
  cursor: pointer;
}

input:checked ~ label {
  padding-left: 19px;
}

.checkbox > label > span {
  position: absolute;
  left: 0;
  top: 0;
}

.checkbox > label > span.on {
  transform: translateY(0px);
}

.checkbox > label > span.off {
  transform: translateY(20px);
}

input:checked ~ div::before, input:checked ~ div::after, input:checked ~ label > span {
  transition: transform .3s 0s;
}

input:not(:checked) ~ div::before, input:not(:checked) ~ div::after, input:not(:checked) ~ label > span {
  transition: transform .3s .3s;
}

input:checked ~ label > span.on {
  transform: translateY(0px);
}

input:checked ~ label > span.off {
  transform: translateY(20px);
}

input:not(:checked) ~ label > span.on {
  transform: translateY(-20px);
}

input:not(:checked) ~ label > span.off {
  transform: translateY(0px);
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

HTML5CSS3CSS AnimationDeveloper Toolsanimation