Search Results for “label/CSS Animation” – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 02 May 2023 12:10:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Neumorphism Loading Spinner in HTML & CSS https://www.codingnepalweb.com/loading-spinner-html-css/ https://www.codingnepalweb.com/loading-spinner-html-css/#respond Wed, 01 Feb 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4120 Neumorphism Loading Spinner in HTML & CSS
Building a Loading Spinner can improve HTML, CSS, and animation skills. Neumorphism UI enhances user experience by using light and shadow. Improving hierarchy and relationships between elements in the interface.

 

In this article, you will discover how to craft an attractive Loading Spinner utilizing Neumorphism UI with HTML and CSS. Even if you have no prior experience in HTML and CSS, you will be able to make this spinner with ease. Recently I have provided a blog on creating a Card Slider. I hope that will also be beneficial for you.
A loading spinner indicates page loading with animation. Neumorphism UI is a design style combining 3D elements and shadows for a subtle look with depth. “Neumorphism” is a term combining “new” and “skeuomorphism.”

Video Tutorial of Neumorphism Loading Spinner

If you would like to create this Neumorphism Loading Spinner step by step the full video tutorial is provided below. Otherwise, you may continue reading the blog.

 

Steps to create Loading Spinner in HTML & CSS

We will create this Neumorphims Loading Spinner in two steps using HTML and CSS.

1. File Structure

For starters, we will establish a new directory for our project. You can name it as you wish and within that directory, create two files named index.html and style.css. These files will hold the HTML and CSS code required for the Neumorphism Loading Spinner.

2. Creating the Neumorphism Loading Spinner

In the next step, we will design the layout and enhance the appearance of the spinner using HTML and CSS. To do this, add the following HTML code to your index.html file to establish the basic structure of the spinner.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neumorphism Loading Spinner</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <span></span>
    </div>
  </body>
</html>

In your style.css file, add the following CSS code to style the loading spinner. If you want, you can change the font, size, color, and background of the loading spinner by slightly modifying this code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}
span {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
span::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

By following the steps in this blog post, you’ve learned how to create a Neumorphism Loading Spinner in HTML and CSS.

If you encounter any problems or your code is not working as expected, you can download the source code files of this loading spinner by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

 

]]> https://www.codingnepalweb.com/loading-spinner-html-css/feed/ 0 Button Click Animation in HTML CSS & JavaScript https://www.codingnepalweb.com/button-click-animation-html-css-javascript/ https://www.codingnepalweb.com/button-click-animation-html-css-javascript/#respond Sat, 07 Jan 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4124 Button Click Animation in HTML CSS & JavaScript

Creating a button-click animation in HTML, CSS, and JavaScript can be a challenging but rewarding learning project. This project is a great opportunity to hone your skills in animations and make something that you can share with others.

A button-click animation is a type of animation that is activated when a button is clicked by a user. These animations can take various forms, such as changing the button’s color, and size, or creating a ripple effect. Button-click animations add a layer of interactivity and engagement to websites and web applications.

In this blog, you will learn to create a button-click animation using HTML, CSS, and JavaScript! By the end of this tutorial, you will have a button that animates when clicked, producing small bubbles as shown in the image. Recently I created a Chrome Extension I hope that project will also be helpful for you.

Video Tutorial of Button Click Animation

If you prefer to learn through video tutorials, this tutorial on creating a button-click animation is for you! We’ll take you step by step through the process of creating a button that animates when clicked Alternatively, you can continue reading this blog for a written guide on the same topic.

Steps to Create a Button Click Animation 

We will create a  Button Click Animation in HTML, CSS, and JavaScript in two simple steps:
  • File Structure of the Project
  • Creating Button Click Animation

1. File Structure of the Project

To build this button-click animation, we’ll be using two separate files – index.html and style.css. These files will contain the HTML, CSS, and JavaScript code respectively needed to bring the button click animation. Let’s get started by setting up these files and adding the basic code.

Once you have made these files, you can proceed to the next step of creating your Button Click Animation.

2. Creating Button Click Animation

In the second step, we will design the user interface for our button and style it using HTML and CSS. Once the user interface is complete, we will use JavaScript to create make animate on button click.

In the index.html file, add the following HTML and JavaScript code to create the basic structure of the animated button

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Button Click Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button class="button">Click Me</button>

    <script>
      const button = document.querySelector(".button");

      button.addEventListener("click", (e) => {
        e.preventDefault;
        button.classList.add("animate");
        setTimeout(() => {
          button.classList.remove("animate");
        }, 600);
      });
    </script>
  </body>
</html>

In the style.css file, add the following CSS code to add styles and make the button and its bubbles. If you want, you can change the color, background, font, and size of the button in this code.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0faff;
}

.button {
  position: relative;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #7d2ae8;
  transition: all 0.2s ease;
}
.button:active {
  transform: scale(0.96);
}
.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}
.button.animate::before {
  top: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  animation: greentopBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.button.animate::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  animation: greenbottomBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

Conclusions and Final Words

By following the steps you have successfully created a button-click animation. There are lots of animations you can find on this website to enhance your skills in animation.

If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!

 

]]> https://www.codingnepalweb.com/button-click-animation-html-css-javascript/feed/ 0