https://github.com/withaarzoo/animated-pencil-loader

This repository contains HTML and CSS code for an animated pencil loader, designed to be used as a loading animation for web pages. The loader consists of a pencil icon that animates in a loop, giving users a visual cue that the page is still loading.
https://github.com/withaarzoo/animated-pencil-loader

codewithaarzoo css cssanimation html

Last synced: about 1 month ago
JSON representation

This repository contains HTML and CSS code for an animated pencil loader, designed to be used as a loading animation for web pages. The loader consists of a pencil icon that animates in a loop, giving users a visual cue that the page is still loading.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-pencil-loader
• Owner: withaarzoo
• Created: 2024-03-05T06:56:14.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-03-05T14:47:49.000Z (12 months ago)
• Last Synced: 2024-11-15T19:37:47.737Z (3 months ago)
• Topics: codewithaarzoo, css, cssanimation, html
• Language: CSS
• Homepage:
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Pencil Loader

This repository contains HTML and CSS code for an animated pencil loader, designed to be used as a loading animation for web pages. The loader consists of a pencil icon that animates in a loop, giving users a visual cue that the page is still loading.

## Preview

![preview](https://github.com/withaarzoo/Animated-Pencil-Loader/assets/59678435/1c2ea641-b3b1-4051-a9c3-b1f49891cbca)

## HTML Structure

The HTML file defines the structure of the loader. It includes a `` declaration and sets the document type as HTML. The content is enclosed within ``, ``, and `` tags. Key elements include:

- **Character Encoding:** The document specifies UTF-8 character encoding for proper text rendering.

- **Viewport Configuration:** Meta tags are used to configure the viewport for responsive design.

- **External Stylesheet:** The HTML file links to an external CSS stylesheet named `style.css`.

- **Page Title:** The title of the webpage is set to "Animated Pencil Loader".

- **Loader Elements:** Various `
` elements are used to create the pencil loader, including subdivisions for the pencil's components and a horizontal line.


## CSS Styling

The CSS file (`style.css`) contains styling rules to customize the appearance and animation of the loader. Key styling features include:

- **Font:** The Google Fonts library is imported to use the "Poppins" font family.

- **Layout:** Flexbox layout is utilized to center the content both horizontally and vertically within the viewport.

- **Background:** Gradient background colors are applied to the body element.

- **Pencil Animation:** Keyframes are defined to animate the rotation and movement of the pencil icon.

- **Pencil Components:** Styling rules are provided for each component of the pencil, including the ball point, cap, middle section, and eraser.

- **Line Animation:** Another set of keyframes is defined to animate the horizontal line below the pencil.

- **Typography:** Font size and positioning are adjusted for the loading message.

## Usage

To use this animated pencil loader on your webpage, simply include the HTML and CSS code provided in this repository. You can customize the loader's appearance and animation by modifying the CSS styles according to your preferences.

## License

This code is provided under the MIT License. Feel free to use and modify it for your own projects. See the [LICENSE](LICENSE) file for more details.