Build a CSS3 3D Loading Progressbar Web Components in Browser Using HTML & Javascript

geekygautam1997 January 9, 2025No Comments

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>css-3d-progress</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script defer src="https://unpkg.com/css-3d-progress@0.0.3/css-3d-progress.js"></script>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: grid;
        place-items: center;
        background-color: #d0d0d0;
      }
    </style>
  </head>
  <body>
    <div style="width: 20em">
      <css-3d-progress percent="50"></css-3d-progress>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>css-3d-progress</title>

<style>

body {

margin: 0;

height: 100vh;

display: grid;

place-items: center;

background-color: #d0d0d0;

}

</style>

</head>

<body>

<css-3d-progress percent="50"></css-3d-progress>

</div>

</body>

</html>

geekygautam1997

View All Posts

Comments

No comments yet. Why don’t you start the discussion?

Build a CSS3 3D Loading Progressbar Web Components in Browser Using HTML & Javascript

Comments

Leave a Reply Cancel reply

Archives