DEV Community: Designing Coder

Easy and Quick Single DIV Spinning Dots Loading Status Animation using Vanilla CSS Only

Designing Coder — Thu, 14 Oct 2021 05:45:38 +0000

If you prefer video over text then there is a YouTube video at the end of the article. Let's go step-by-step and build our loading animation.

Step-1: Setting up theme

Let's first set up the theme and position our animation.

    <div class="loading"></div>

    body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      background: midnightblue;
      justify-content: center;
      align-items: center;
    }
    .loading {
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
        background: white;
    }

The circle you see is for the reference, we will remove it later.

Step-2: Adding the dots

We will use box-shadow which will help us add more circles or dots without adding any extra div. We will position them around our previous circle.

     .loader {
         ...
      box-shadow:
            0 -3em 0rgba(255, 255, 255, 1),
            2.25em -2.25em rgba(255, 255, 255, 0.875),
            3em 0 rgba(255, 255, 255, 0.75),
            2.25em 2.25em rgba(255, 255, 255, 0.625),
            0 3em rgba(255, 255, 255, 0.5),
            -2.25em 2.25em rgba(255, 255, 255, 0.375),
            -3em 0 rgba(255, 255, 255, 0.25),
            -2.25em -2.25em rgba(255, 255, 255, 0.125)
            ;
    }

We no longer need the first circle(background: white;), we can remove it.

Step-3: Animation

We just need to the div to keep rotating as per our need, which is a one-liner coder.

    .loading {
        ...
      animation: spin 1.2s linear infinite;
    }

    @keyframes spin {
      100% { transform: rotate(-360deg) }
    }

We have our single div loading status animation ready. Thank you for reading.

Please feel free to drop you opinion or any helpful tips.

Feel free to connect on Social Media: https://designingcoder.github.io

Making of Three Dots Jumping Loader or Loading Status Animation using Vanilla CSS only

Designing Coder — Tue, 28 Sep 2021 10:47:50 +0000

Let's go step-by-step walk-through on How to Make a Simple Three Dots Jumping Loader or Loading Status Animation using Vanilla or Pure CSS only.
If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step-1: Setting up theme and container

Firstly, we will create a container in which we can have our loader and caption. The following will place the container at the centre of the page.

    <div class ="container">
      <div class="loader"></div>
      <div class="caption"></div>
    </div>

    body {
      display: flex;
      height: 100vh;
      background: midnightblue;
      overflow: hidden;
    }
    .container {
      display: flex;
      max-width: max-content;
      flex-direction: column;
      margin: auto;
      border: 1px solid yellow;
    }

We have added a yellow border for the ease of visualisation, which should be removed at the end.

Step-2: Adding the three dots

Now we will add the three dots. Since all the three dots have similar look, we can provide them a common class as circle and assign unique ids as a, b and c for animation purpose(you'll find why and how as we proceed further).

Here also we have added yellow border for the ease of visualisation, which should be removed at the end.

    <div class ="container">
      <div class="loader">
        <div class="circle" id="a"></div>
        <div class="circle" id="b"></div>
        <div class="circle" id="c"></div>
      </div>
      <div class="caption"></div>
    </div>

   .loader {
      width: 180px;
      height: 80px;
      margin: auto;
      display: flex;
      border: 1px solid yellow;
    }
    .circle {
      width: 30px;
      height: 30px;
      background: white;
      border-radius: 50%;
      margin: 0 15px;
    }

Step-3: Adding the caption

Let's add our caption and make sure it is properly placed properly with respect to the loader.

    <div>
        <div class="loader">
        ...
        </div>
      <div class="caption">We are almost there...</div>
    </div>

    .caption {
      margin: auto;
      font-family: arial;
      font-size: 20px;
      color: white;
    }

Step-4: Animating the loader

We add a common animation property with animation-name as jump, animation-duration as 1 second, animation-timing-function as linear and animation-iteration-count as infinite. To make them jump at different time, we add animation-dealy to ids b and c.

    circle {
        ...
        animation: jump 1s linear infinite
    }
    @keyframes jump {
      0% {
        margin-top: 0;
      }
      35% {
        margin-top: -75px;
      }
      70% {
        margin-top: 0px;
      }
    }


    #b {
      animation-delay: 0.2s;
    }
    #c {
      animation-delay: 0.4s;
    }

Now we can remove the yellow border, we don't need them anymore. Finally, we have our loading animation ready. Thank you for reading.You can also watch a How To YouTube Video on this topic.

Feel free to connect on Social Media. Please feel free to drop you opinion or any helpful tips.

Social Media Links: https://designingcoder.github.io

Responsive Table Using Vanilla CSS Only for Better User-Experience

Designing Coder — Wed, 28 Apr 2021 08:31:51 +0000

Usually the table we make does not provide good user experience in terms of data visualisation. So in this article I am going to share my approach for making a better responsive table for data-visualisation.

If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step 1: Setting up table content in html.

Instead of using traditional HTML tags, I am going to use similar class names. No special reasons just personal preference.

Let's consider a dummy data in which we have details for printing a company's employee Id-card.

    <div class="caption">Employee Details</div>
    <div class="table">
      <div class="th">
          <div class="td">Name</div>
          <div class="td">DoB</div>
          <div class="td">Specialization</div>
          <div class="td">Blood Group</div>
          <div class="td">Emergency Contact</div>
      </div>
      <div class="tbody">
        <div class="tr">
          <div class="td">John</div>
          <div class="td">10/09/1993</div>
          <div class="td">UI/UX Designer</div>
          <div class="td">O+</div>
          <div class="td">98765 43210</div>
        </div>
        <div class="tr">
          <div class="td">Doe</div>
          <div class="td">01/01/2000</div>
          <div class="td">Network Architecture</div>
          <div class="td">A+</div>
          <div class="td">87654 32109</div>
        </div>
        <div class="tr">
          <div class="td">Jane</div>
          <div class="td">09/10/1999</div>
          <div class="td">Frontend Developer</div>
          <div class="td">B+</div>
          <div class="td">76543 21098</div>
        </div>
        <div class="tr">
          <div class="td">Satoshi</div>
          <div class="td">20/08/1999</div>
          <div class="td">Backend Developer</div>
          <div class="td">AB+</div>
          <div class="td">65432 10987</div>
        </div>
        <div class="tr">
          <div class="td">Nakamoto</div>
          <div class="td">14/10/1983</div>
          <div class="td">Fullstack Developer</div>
          <div class="td">O-</div>
          <div class="td">54321 09876</div>
        </div>
      </div>
    </div>

Step 2: Styling the classes for a table look

Let's have a zebra stripe table and assign different color to the header and also assign equal width to each column.

    body {
      font-family: arial;
    }
    .caption {
      font-size: 30px;
      font-weight: bold;
      margin: 25px;
      text-align: center;
    }
    .tr {
      display: flex;
    }
    .th {
      display: flex;
      background: mediumblue;
      color: white;
    }
    .td {
      width: 20%;
      border: 1px solid #777;
      padding: 10px;
    }
    .tr:nth-of-type(even) {
      background: #efefef;
    }

Now we have a basic table. You can resize your screen and see how bad is the user experience for small screens.

Let's make it look better for small screens also.

Step 3: Hiding Header and Changing Table View

We will change to single column and multi row view for each data set. From here we will write styling for @media (max-width: 600px), (max-device-width: 600px).

    .th {
        display: none;
    }
    .tr {
        display: block;
        margin-bottom: 25px;
        background: transparent !important;
    }
    .td {
        background: #f0f0f0;
        display: flex;
        width: 90%;
        margin: auto;
    }

Step 4: Adding header and data labels

We will consider the first row of each set as the header and color it different for better visualisation.

      .td:nth-of-type(1) {
        content: "Name:";
        background: mediumblue;
        color: white;
        font-weight: bold;
      }
      .td:before {
        font-weight: bold;
        display: block;
        width: 50%;
      }
      .td:nth-of-type(2):before {
        content: "DoB:";
      }
      .td:nth-of-type(3):before {
        content: "Specialization:";
      }
      .td:nth-of-type(4):before {
        content: "Blood Group:";
      }
      .td:nth-of-type(5):before {
        content: "Emergency Contact:";
      }

Step 5: Fixing font-size and padding for all devices.

    @media (max-device-width: 600px) {
      .table {
        font-size: 2rem;
      }
      .td {
        padding: 20px;
      }
    }

Finally, we can change the screen size and still our data is easy to understand.

Thankyou for reading. Please feel free to drop your opinion or any helpful tips.

Social Media Links: https://designingcoder.github.io

Creating a Loading Status or Building Process Animation using Vanilla CSS

Designing Coder — Wed, 14 Apr 2021 07:38:42 +0000

In this article we will go through step by step to create Loading Status or Building Process animation using Vanilla CSS.

If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step 1: Setting up background theme

We wil use eminstead of px in css so we can change the size of the animation by change the font-size in the html.

    <div id="building" style="font-size:12px">
        <div id="blocks">
        </div>
        <div class="caption">
        </div>
    </div>

    body {
      background: #050115;
      color: #d5fff7;
      font-family: Arial;
      overflow: hidden;
    }

Step 2: Setting up space for blocks and caption

This will get our animation and caption to be at the center of the page, where caption is on the right side of the animation.

    #building {
      display: flex;
      width: 35em;
      height: 100vh;
      margin: auto;
    }
    #blocks {
      margin: auto;
    }
    #caption {
      padding-left: 0.5em;
      margin: auto;
      font-size: 2.5em;
    }

Step 3: Adding the blocks

Since we are going to have 4 identical blocks we give them a commom class as b and for adjustment we provide them unique ids as b1, b2, b3 and b4.

        <div id="blocks">
            <div class="b" id="b1"></div>
            <div class="b" id="b2"></div>
            <div class="b" id="b3"></div>
            <div class="b" id="b4"></div>
        </div>

    .b {
      background: #d5fff7;
      border: 0.3em solid #89f2f2;
      width: 4.5em;
      height: 4.5em;
      border-radius: 0.5em;
      margin: 1em;
      position: relative;
    }

Now we have our four boxes. Next we will position them.

Step 4: Positioning the boxes

We will position b2, b3 and b4 relative to b1

    #b2 {
      margin-left: 7.25em;
    }
    #b3 {
      margin-top: -6em;
    }
    #b4 {
      margin-left: 7.25em;
    }

Step 5: Animating the blocks

We have four blocks so we need to provide them unique animation name and animate them differently. But they will have same animation-duration, animation-iteration-count and animation-timing-function. So we do as below.

    .b{
    ...
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    }
    #b1 {
        animation-name: b1;
    }
    #b2 {
      ...
        animation-name: b2; 
    }
    #b3 {
      ...
        animation-name: b3;
    }
    #b4 {
      ...
        animation-name: b4;
    }
    @keyframes b1 {
      0% {
        left: 0em;
        transform: rotate(0deg);
      }
      50% {
        left: 6.25em;
        bottom: 0em;
        transform: rotate(90deg);
      }
      100% {
        left: 6.25em;
        bottom: -6.125em;
        transform: rotate(90deg);
      }
    }
    @keyframes b2 {
      50% {
        bottom: 0em;
      }
      100% {
        bottom: -6.125em;
      }
    }
    @keyframes b3 {
      50% {
        top: 0em;
      }
      100% {
        top: -6.125em;
      }
    }
    @keyframes b4 {
      0% {
        left: 0em;
        transform: rotate(0deg);
      }
      50% {
        left: -6.25em;
        top: 0em;
        transform: rotate(90deg);
      }
      100% {
        left: -6.25em;
        top: -6.125em;
        transform: rotate(90deg);
      }
    }

Step 6: Adding Caption and adjusting for small screen

Here you can do something different may be position the caption below the animation, but I prefer it hidden in small-screens.

    <div id="caption">
        Your product is almost ready...
    </div>

    @media (max-width: 400px) {
      #building {
        width: 100%;
      }
      #caption {
        display: none;
      }
    }

Thankyou for reading. You can subscribe to following links for more updates.
Social Media Links: https://designingcoder.github.io

Creating a simple Head-Tail Spinner using Vanilla CSS

Designing Coder — Sat, 03 Apr 2021 07:28:43 +0000

In this article we will go through step by step to create a simple and regular Head-Tail spinner using Vanilla CSS.

If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step 1: Adding a class spinner

In index.html we add class spinner by:

    <div class = "spinner"></div>

In index.css we define the class spinner:

    body {
        background: #050115;
    }
    .spinner {
        width : 10em;
        height: 10em;
        border-top : 1em solid #d5fff7;
        border-right: 1em solid transparent;
        border-radius: 50%;
    }

This creates a tail like structure of our spinner. The next thing will be add a head to it.

Step 2: Adding a head

We add a class head inside the div of the spinner's div.

    <div class = "spinner">
        <div class = "head"></div>
    </div>

Now, we need to define and postion the head to the required place:

    .head {
        width: 1em;
        height: 1em;
        background-color: #d5fff7;
        border-radius: 50%;
        margin-left: 8.5em;
        margin-top: 0.5em;
    }

The spinner looks good and has the attention of the user when it's in the miiddle of the page.

Step 3: Positioning the spinner

We already have the class spinner, we add margin: auto inside it to position it to the center of the page

    .spinner {
        ...
        margin: auto
    }

The spinner is just horizontally centred to the page because the height of the body is not full-screen. Let's fix that now:

    body {
        background: #050115;
        display: flex;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
      }

Let's add motion to our work.

Step 4: Adding animation

In the class spinner we use animation and define the animation proprties:

    .spinner {
        ...
        animation: spinner 0.6s linear infinite;
    }

In the property animation, spinner is the animation-name, we can use other name as well. 0.6s is the animaion-duration in which our animation will go from 0% to 100%, linear is the animation-timing-function which makes it look smooth and infinite if animation-iteration-count.

Now we make the animatoin behave:

    @keyframes spinner {
        100% { transform: rotate(360deg) }
    }

Voila! We have our spinner live.

Step 5: Changing the size of the spinner

Here till now I have used em instead of px, so that we can control the size of the spinner from a single place instead of making the changes at various places.

To change the size of the spinner, we add a inline style for font-size and change it's value as shown:

    <div class = "spinner" style = "font-size: 10px">
        <div class = "head"></div>
    </div>

Default value of 1em is 16px usually. So, changing the font-size here changes the value of 1em thereby changing the size of the spinner.

Social Media Links: https://designingcoder.github.io