circle loader using css
circle loader using css

Hy Everyone, In this tutorial, we will create a Circle Loader Using CSS. A circle loader can be used to show a loading screen.

A Loading Screen is used because when we load a website it fetches data from the server at that time website has no viewable content, so we use a loading screen to load data in the background. If we don’t have a loading screen and our website takes too much time to load at that time a user can exit but if we have a loading screen user will wait for the next screen. It can increase users.

Table of Contents

Circle Loader Using CSS

For creating our circle loader we will use HTML & CSS only. So we need to create two files called index.html and style.css. Let’s start with our index.html file.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Circle Loader using CSS</title>
  </head>
  <body>
    <div class="loader">
      <svg viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10" fill="none" stroke-width="4" stroke-linecap="round"></circle>
      </svg>
    </div>
  </body>
</html>


Here we are using a div to create the outer layer of our loader and the class name of our div is “loader”. Inside the loader, we are using SVG to create a circle.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other W3C standards such as the DOM and XSL

style.css

:root {
  --background: white;
  --foreground: red;
}

.loader {
  --size: 5em;
  display: inline-block;
  width: var(--size);
}
.loader svg {
  display: block;
  transform: rotateZ(0deg);
}
.loader circle {
  stroke: currentcolor;
  stroke-width: 5px;
  r: 9.5px;
  stroke-dasharray: 0.01px, 59.6802604165px;
  stroke-dashoffset: 0;
  animation: 1.8s cubic-bezier(0.3, 0.8, 0.1, 1) infinite go;
}

@keyframes go {
  0% {
    stroke-dasharray: 0.01px, 59.6802604165px;
    stroke-dashoffset: 0;
  }
  25% {
    stroke-dasharray: 29.8451302083px, 29.8451302083px;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 0.01px, 59.6802604165px;
    stroke-dashoffset: -29.8451302083px;
  }
  75% {
    stroke-dasharray: 29.8451302083px, 29.8451302083px;
    stroke-dashoffset: -29.8451302083px;
  }
  100% {
    stroke-dasharray: 0.01px, 59.6802604165px;
    stroke-dashoffset: -59.6902604165px;
  }
}

@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
*,
:before,
:after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.375;
}


Here is our style.css file here we are usign :root to define our variables as background for the background color and foreground for our loader color.

Hope you guys enjoyed this tutorial!

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply