DEV Community: Sunder Mehra

Make a TEXT loading template.

Sunder Mehra — Fri, 21 Jun 2024 09:38:22 +0000

I will be showing how to create a loading text using HTML, CSS and JS.

HTML
Create a div and inside div, create span with each character in different span and give class name as "sp"[it can be anything].

 <div class="loading">
        <span id="l" class="sp">L</span>
        <span id="o" class="sp">O</span>
        <span id="a" class="sp">A</span>
        <span id="d" class="sp">D</span>
        <span id="i" class="sp">I</span>
        <span id="n" class="sp">N</span>
        <span id="g" class="sp">G</span>
      </div>

CSS

body{
  background-color:black;
}
.loading{
  width:400px;
  text-align:center;
  margin:50px auto;
  position:relative;
}
span{
  font-size:2rem;
  font-weight:bolder;
  margin:10px;
  color:white;
  position:absolute;
}

Once above code is done. As we have used position as absolute, all span will collapse in one place.
so we will give space of 40px between each span and we will also give some animation-delay between each character animation. Because we don't want every character to animate at the same time.

  #l{left:10px;}  
  #o{left:50px;animation-delay:0.4s;}
  #a{left:90px;animation-delay:0.8s;}
  #d{left:130px;animation-delay:1.2s;}
  #i{left:170px;animation-delay:1.6s;}
  #n{left:210px;animation-delay:2s;}
  #g{left:250px;animation-delay:2.4s;}

Now we will be defining two @keyframes with different name "loading" and "second-loading". Which we will toggle between using js.

@keyframes loadingL{
   0%{scale:1;opacity:1;}
    50%{scale:1.8;filter: blur(1px);opacity:0.5;}
    100%{scale:1;opacity:1;}
  }
  @keyframes secondloading{
    0%{scale:1;opacity:1;}
    50%{scale:1.8;filter: blur(1px);opacity:0.5;}
    100%{scale:1;opacity:1;}
  }

Adding animation to two class to toggle between.

.sp{
    animation: loadingL 1s linear forwards;
  }
  .new-sp{
    animation: secondloading 1s linear forwards;
  }

Now we just have to toggle between .sp and .new-sp after some interval of time.

Javascript
Code to toggle between classes after 3.4 second.

 const sp= document.querySelectorAll(".sp");

 const time= setInterval(()=>{
    sp.forEach(element=>{
        if (element.classList.contains("sp")) {
            element.classList.replace("sp", "new-sp");
        } else {
            element.classList.replace("new-sp" ,"sp");
        }
    })
 },3400);

For final result visit my pen in Codepen.
Text loader

Thank you guys.
Ask, If any queries.

Create a Circular progress bar using HTML, CSS and JS.

Sunder Mehra — Wed, 19 Jun 2024 14:09:38 +0000

I am going to give you a easy way to create a circular progress bar using html, css and javascript.

HTML:
Create two div, with .outer and .inner class name.

<div class="outer">
    <div class="inner">0%</div>
</div>

CSS:
I am using flex box to center the inner div and content of div.
1- for .outer div

.outer{
    width: 100px;
    height: 100px;
    margin: 10px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(red 180deg, rgb(255, 255, 255) 0deg);
    box-shadow: -5px -3px 14px 1px #000000, 0px 1px 14px 0px #ffffff;
}

2- For .inner div

.inner{
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 4px 0px black;
    font-weight: bolder;
    font-size: 1rem;

}

Note:
I am using background as conic-gradient for OUTER div to make progress bar and INNER div will have same background as root background to blend in.
background: conic-gradient(red 180deg, rgb(255, 255, 255) 0deg);

Once done you will get this result as we have given 180deg.

Now we want to make it dynamic.
So to make it dynamic or to add animation feel we will use below javascript code.

I have added comments to know the definition of each line.

//get the refrence of div in js using query selector for both inner and outer div
const progressbar= document.querySelector(".outer");
const innerbar= document.querySelector(".inner");

//make initial value as 0
var currentdeg=0;

//define a interval which will run with the interval of 15 milisecond [increase or decrease the value of
//timer as slow or fast you what your progress bar to be]
const myInterval= setInterval(()=>{
    //increment degree with the value of 1 each time function is called
    currentdeg=currentdeg+1;

    //convert the degree to the percentage so that you can update value in html
    var deg= (currentdeg/360)*100;

    //increment the degree value
    progressbar.style=`background:conic-gradient(red ${currentdeg}deg, rgb(255, 255, 255) 0deg);`;

    //update the inner div value as percentage
    innerbar.innerHTML=`${Math.floor(deg)}%`;

    //stop or clear interval at particular value here i am using 60 % as max value
    //after which our interval will stop
    if(deg>60)
    {
        clearInterval(myInterval);
    }
    },
15);

Thank you.
Please feel free if you have any queries.

Scroll watcher progress timeline bar in easy step.

Sunder Mehra — Sun, 16 Jun 2024 15:59:27 +0000

Scroll watcher is a progress bar which check for the scroll bar. It act as a custom progess bar which indicates 0% as the start of webpage and 100% as the end of webpage.
example:
1- We are at the top of webpage.

2- We are at the end of webpage.

HTML:-

Just add a div with class name.
<div className="scroll-watcher"></div>

CSS:-

1- Make div with some initial height, i have given of 5px and width of 100%
2- Choose color of as you like.
3- Give z-index of max so that our scroll watcher do not go behind any other component. It should be at the top.
4- Scroll watcher should be sticked to the top of the page.
5- I have given "margin:auto" to make the scroller at the top-center.

.scroll-watcher{
    height: 5px;
    background-color: rgb(110, 36, 213);
    border-radius: 15px;
    position: sticky;
    width: 100%;
    z-index: 999;
    margin: auto;
    top: 0;
  }

Once done, you will get this result:

Now its time to add animation.
Add keyframe with from and to. from indicates what will be the initial width and to indicates what will be final width.

@keyframes scroll-watcher {
    from{width:5%}
    to{width:100%}
  }

Now add the animation property for scroller.
1- Give animation name and animation property here i have given linear.
animation: scroll-watcher linear;
2- Give animation timeline, Here scroll show that animation will work
when you are scrolling.
animation-timeline: scroll();

So the final CSS will be

.scroll-watcher {
    height: 5px;
    background-color: rgb(110, 36, 213);
    border-radius: 15px;
    position: sticky;
    width: 100%;
    z-index: 1000;
    margin: auto;
    top: 0;
    animation: scroll-watcher linear;
    animation-timeline: scroll();
}

Thanks,
Feel free to ask any queries.

Making a progress bar in easy steps

Sunder Mehra — Sun, 16 Jun 2024 15:18:22 +0000

Here i will be giving you easy steps to build a progress bar using HTML and CSS only. We will be using @keyframes for CSS animation.
Step 1: HTML

Create a div and another nested div

<div class="outer-box">
   <div class="inner-box">80%</div>
</div>

Step 2: CSS

Give width to outer-box and inner-box with some padding in CSS. Here i have given padding of 10px. Now add animation with name "progressbar" and make the animation liner. Give animation duration as you like, here i have given it of 5 second. Now using "@keyframes" give you animation from and to. You can also replace from and to with 0% and 100% as you like.

.outer-box{
    width:300px;
    padding:10px;
    background-color: blueviolet;
    border-radius:10px;
}
.inner-box{
    text-align: center;
    max-width: 280px;
    padding: 10px;
    background-color: #61cf71;
    animation: progressbar linear forwards;
    animation-duration: 5s;
    border-radius: 10px;
    color: white;
    font-family: cursive;
}
@keyframes progressbar {
    from{width:1%}
    to{width:80%;}
}

This is simple progress bar. More complex progress bars can be made using javascript.

Thanks
Feel free for any query.