DEV Community: Mahdi

spinnercss - 32 different types of spinners

Mahdi — Tue, 06 Feb 2024 13:16:17 +0000

Improve your website with ready-made spinnercss. Give your website more personality with ready-to-use spinners featuring stunning designs and layouts.

View Website

View On GitHub

Documents

Spinners are available in three different styles; circle , dots, line . You can choose each with your interest. And we will describe and use it.

First, add the spinnercss.css file to your project so you can access the classes, there is also a compressed version of this file.

How to use or library syntax is as follows:

First Sample Code

<div class="circle-2 spinner-background-full">
    <div class="circle-2"></div>
</div>

Second Sample Code

<div class="dots-9">
    <div class="dots-9"></div>
    <div class="dots-9"></div>
    <div class="dots-9"></div>
    <div class="dots-9"></div>
</div>

Classes

For comfortable work with Spinners, we have embedded several classes so that you can maneuver more on the details of the size of the work, these classes include:

resizing the width and height, the size of the border and the assignment of the background, as well as several effects to move the icons and... Of course you can easily customize this class and even Spinners. (Of course, some classes do not function for spinners, Do not worry that this partial problem will be solved in the future.)

.w-h-30 .w-h-40 ... .w-h-100
.border-width-1 .border-width-2 ... .border-width-10
.spinner-background .spinner-background-full .spinner-background-rounded
.rotate .rotateY-360 .rotateY-180 .rotateY-90 .rotateX-360 .rotateX-180
.rotateX-90

spinnercss Website Project: https://dribbble.com/shots/23584966-spinnercss-Website-Project

spinnercss Logo Project: https://dribbble.com/shots/23584953-spinnercss-Logo-Project

CSS Assistant

Mahdi — Fri, 08 Jul 2022 06:41:41 +0000

Hello friends,

CSS Assistant is a CSS kernel utility that can help you with user-side coding. This assistant receives commands by voice from the user and after the necessary processing, adds the command or attribute to the file and the changes in the file will be applied immediately.

v1.0 (Sunday, June 6, 2022):

35 Command CSS and 6 Command System = ListCSSAssistant

Installation:

To launch the program, first install the required packages and then use the program safely. You can also install the required packages by running the setup.bat file.

Core Dependencies:

SpeechRecognition
colorama
platform
pyttsx3
random
os

Project at GitHub: https://github.com/Mhadi-1382/CSS-Assistant

M-One Personal Assistant v2.4 - Update: Friday, June 24, 2022 + GUI v1.0

Mahdi — Thu, 07 Jul 2022 07:20:47 +0000

Hello friends,

Update 2.4 of M-One Assistant has been released.

Version 2.4 (Update: Friday, June 24, 2022):

M-One in version 2.4 can do 81 things.

Important changes in version 2.4:

change voice, in what language are you written, do you know me, set alarm (Download Music for Alarm), edit note, open calculator, open disk c & d & e, open task manager, toggle capslock, toggle numlock, start menu, and fix program bugs...

And a graphic version of M-One has been released.

M-One (v2.0) GUI v1.0:

Includes interface Typing and Listening - GUI_v1.0

Screenshots

Core Dependencies

Python 3 (3.9.7)
SpeechRecognition
subprocess (version 2.0)
webbrowser
threading (version 2.4)
winsound (version 2.4)
tkinter (version 2.0 - GUI v1.0)
wikipedia
pyautogui (version 2.0)
translate
requests
pyqrcode
platform (version 2.0)
winshell (version 2.0)
datetime
PyAudio
pyttsx3
random (version 2.0)
urllib
whois (version 2.0)
time
os

Project at GitHub: https://github.com/Mhadi-1382/M-One-personal-assistant

Learn more about M-One: https://dev.to/mhadi2003/m-one-personal-assistant-v10-l0h

In the future, some features of this program will be added and some of its shortcomings will be eliminated.
You dear ones can also express your opinions and suggestions.

M-One Personal Assistant v2.0 - Update: Saturday, June 11, 2022

Mahdi — Sat, 11 Jun 2022 16:00:26 +0000

Hello guys,

The M-One was built on Sunday, May 8, 2022, and now has its first update on Saturday, June 11, 2022.

Version 2.0 (Update: Saturday, June 11, 2022):

M-One in version 2.0 can do 68 things.

Important changes in version 2.0:

Play music, play videos, open photos, take notes and read them, find locations on the map, whois site, weather, check if you are connected to the Internet, open the source code of the application in GitHub and ... More Features -Improved user interface, bug fixes and lots of other problems.

Core Dependencies

Python 3 (3.9.7)
SpeechRecognition
subprocess (version 2.0)
webbrowser
wikipedia
pyautogui (version 2.0)
translate
requests
pyqrcode
platform (version 2.0)
winshell (version 2.0)
datetime
PyAudio
pyttsx3
random (version 2.0)
urllib
whois (version 2.0)
time
os

Project at GitHub: https://github.com/Mhadi-1382/M-One-personal-assistant

Learn more about M-One: https://dev.to/mhadi2003/m-one-personal-assistant-v10-l0h

In the future, some features of this program will be added and some of its shortcomings will be eliminated.
You dear ones can also express your opinions and suggestions.

M-One Personal Assistant v1.0

Mahdi — Fri, 03 Jun 2022 14:10:09 +0000

Hello guys,
M-One is a personal assistant who can help you with some simple tasks.
I wrote this program in Python language and I hope it is interesting and useful for you.

About

I work for minor tasks such as opening websites such as Google, announcing time and date, converting text to audio, creating qrcode, extracting information from wikipedia, downloading photos, etc., translating texts, displaying stored WiFi passwords, displaying public IP You, shut down the computer, create a folder and delete it, the ability to delete files on the computer, and all other features.

This program has two user interfaces: Typing and Listening.

Installation

To launch the program, first install the required packages and then use the program safely.

Use the help command to display the program commands.

Core Dependencies

Python 3 (3.9.7)
translate
speech_recognition
webbrowser
wikipedia
requests
pyqrcode
datetime
pyttsx3
urllib
time
os

Project at GitHub: https://github.com/Mhadi-1382/M-One-personal-assistant

Information v2.0: https://dev.to/mhadi2003/m-one-personal-assistant-v20-3c6f

Information v2.4 + GUI v1.0: https://dev.to/mhadi2003/m-one-personal-assistant-v24-update-friday-june-24-2022-gui-v10-l4e

In the future, some features of this program will be added and some of its shortcomings will be eliminated.
You dear ones can also express your opinions and suggestions.

Build Spinner With HTML, CSS, SVG

Mahdi — Sun, 20 Mar 2022 14:45:53 +0000

Hello friends,
In this article, I will teach you how to create a Spinner with HTML, CSS, SVG.

View live Codepen: https://codepen.io/mhadi-2003/pen/abEZdjX

HTML

<div class="container">
    <svg role="status" class="spinner animation-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path>
        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path>
    </svg>
</div>

CSS

.container {
    padding: 10rem 1rem 1rem 1rem;
    text-align: center;
}

// Spinner
.spinner {
    color: rgb(229, 231, 235);
    height: 50px;
    width: 50px;
    fill: #1c64f2;
}

// Animation Spin
.animation-spin {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

You can change the color inside the spinner with the Fill property and the border color with the Color property:

fill: red;

color: #fff;

Or you can use the Width and Height attributes to resize the spinner:

height: 60px;
width: 60px;

You can also increase or decrease the speed of the spinner with the animation attribute:

animation: spin 1s;

I hope you enjoyed this article.

Build a loading with HTML, CSS, Javascript

Mahdi — Wed, 02 Feb 2022 08:24:28 +0000

Hello friends,
In this article, I will teach you how to create a loading with HTML, CSS, JavaScript. And I hope you like this article.

View live Codepen: https://codepen.io/mhadi-2003/pen/jOaqKjz

HTML

<div class="container">
    <div class="loading-container">
        <div class="loading"></div>
    </div>

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
    Quibusdam nostrum, repellendus enim eveniet deleniti eaque 
    animi suscipit, nihil, fugiat ducimus tenetur quas quam. 
    Tempore magnam corrupti earum consequatur, modi unde?</p> 
</div>

CSS

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        font-family: "Segoe UI", sans-serif;
        line-height: 1.5;
    }

    /* Container */
    .container {
        margin: 50px auto;
        width: 95%;
    }
    @media (min-width: 700px) {
        .container {
            width: 60%;
        }
    }

    /* Loading */
    .loading-container {
        background-color: #ffffff;
        position: fixed;
        z-index: 1000;
        height: 100%;
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: ease all 4s;
    }
    .loaded {
        visibility: hidden;
        opacity: 0;
    }
    .loading {
        border: 2px solid blue;
        border-radius: 50%;
        border-bottom: none;
        border-left: none;
        height: 50px;
        width: 50px;
        animation-name: loader;
        animation-duration: .5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes loader {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* P */
    p {
        margin-bottom: 12px;
    }

JavaScript

window.addEventListener("load" , function(){
    document.querySelector(".loading-container").classList.add("loaded");
})