- 8
- 150 492
Enhance Coding
India
เข้าร่วมเมื่อ 12 เม.ย. 2017
"Welcome to Enhance Coding here, we provide clear and concise tutorials relaated to css tricks & UI elements. Our step-by-step guides are designed to help you master new skills and achieve your goals, no matter your experience level. Subscribe to stay updated with our latest videos and take your skills to the next level!"
CSS Preloaders | 15 Stunning CSS Loading Animation examples for your website
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI
A collection of 15 stunning CSS loading animations by skillful developers are shown in this video. All the css loader's demo and code link are given below. See & let us know in comment which one you like the most.
#1 Jump and Slide - codepen.io/ste-vg/full/OEbYqZ
#2 Stair Loader - codepen.io/ispal/full/mVaaJe
#3 Animated Symbol - codepen.io/aaroniker/full/omvYNZ
#4 Making pancake' loader - codepen.io/pawelqcm/pen/ObwyNe
#5 Animated Loader - codepen.io/majci23/full/NqdXvy
#6 Hand animation - codepen.io/r4ms3s/full/XJqeKB
#7 Modern Google - codepen.io/jczimm/full/vEBpoL
#8 Redirecting Loader - codepen.io/mr_alien/full/FDLjg
#9 Square Loader - codepen.io/tashfene/full/raEqrJ
#10 Animated Block - codepen.io/bojankrsmanovic/full/dpzZkm
#11 Never-ending box - codepen.io/pawelqcm/full/dMqrqd
#12 Escalade Loader - codepen.io/ykadosh/full/PxvbYQ
#13 Bookshelf loader - codepen.io/ikoshowa/full/qOMvpy
#14 Loading Bouncy ball - codepen.io/wabeshew/full/XdbBdM
#15 Play Fill Loader - codepen.io/chrisgannon/full/jLVwxZ
For more video updates please subscribe our channel
A collection of 15 stunning CSS loading animations by skillful developers are shown in this video. All the css loader's demo and code link are given below. See & let us know in comment which one you like the most.
#1 Jump and Slide - codepen.io/ste-vg/full/OEbYqZ
#2 Stair Loader - codepen.io/ispal/full/mVaaJe
#3 Animated Symbol - codepen.io/aaroniker/full/omvYNZ
#4 Making pancake' loader - codepen.io/pawelqcm/pen/ObwyNe
#5 Animated Loader - codepen.io/majci23/full/NqdXvy
#6 Hand animation - codepen.io/r4ms3s/full/XJqeKB
#7 Modern Google - codepen.io/jczimm/full/vEBpoL
#8 Redirecting Loader - codepen.io/mr_alien/full/FDLjg
#9 Square Loader - codepen.io/tashfene/full/raEqrJ
#10 Animated Block - codepen.io/bojankrsmanovic/full/dpzZkm
#11 Never-ending box - codepen.io/pawelqcm/full/dMqrqd
#12 Escalade Loader - codepen.io/ykadosh/full/PxvbYQ
#13 Bookshelf loader - codepen.io/ikoshowa/full/qOMvpy
#14 Loading Bouncy ball - codepen.io/wabeshew/full/XdbBdM
#15 Play Fill Loader - codepen.io/chrisgannon/full/jLVwxZ
For more video updates please subscribe our channel
มุมมอง: 69 033
วีดีโอ
How to create SVG icons sprite sheet | Advance SVG | SVG icons sprite sheet
มุมมอง 7K3 ปีที่แล้ว
In this video we will learn how to create & use external SVG icon sprite sheet. 🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI Instagram : enhancecoding Website : www.enhancecoding.com/
Sidebar Navigation Using Only HTML & CSS | Enhance Coding | Web Tutorials | HTML CSS
มุมมอง 3.4K4 ปีที่แล้ว
In this video we will learn how to create cool Sidebar Navigation using only HTML & CSS. 🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI Instagram : enhancecoding Website : www.enhancecoding.com/ Song: Jim Yosef - Link [NCS Release] Music provided by NoCopyrightSounds. Watch: th-cam.com/video/9iHM6X6uUH8/w-d-xo.html Download/Stream: ncs.io/LinkYO - - - - - - - - - - - - - - - - - - ...
Collapsible/Dropdown Using Only HTML CSS | CSS Tutorial | Enhance Coding | SEO Friendly
มุมมอง 50K4 ปีที่แล้ว
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video I will show you how to create animated collapsible using only CSS which will also work for SEO | CSS Tutorial | CSS Animation Effect | Enhance Coding Music Credit Jarico - Landscape : soundcloud.com/jaricomusic/la... Jarico - Landscape [NCS BEST OF]: th-cam.com/video/Srqs4CitU2U/w-d-xo.html
Animated Glowing Gradient Button Hover Effect Using Only CSS | CSS Tutorial | Enhance Coding
มุมมอง 2.4K4 ปีที่แล้ว
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video I will show you a cool animated glowing gradient button hover effect using only CSS | CSS Tutorial | CSS Animation Effect | Enhance Coding Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. th-cam.com/video/7wNb0pHyGuI/w-d-xo.html
How to install xampp server on windows 10 | Install XAMPP Step by step
มุมมอง 1274 ปีที่แล้ว
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video I will show you how to install xampp step by step on windows 10. Subscribe to our Enhance Coding TH-cam channel and hit the bell icon to get all the updates. #enhancecoding #installxampp #xamppforwindows
Fix - 2 missing PHP extensions check error in Magento 2 installation
มุมมอง 6K7 ปีที่แล้ว
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video i will show you how to solve 2 missing php extensions check errors "php extension xsl." and "php extension intl." while installing magento2. Don't forget to Subscribe our channel for future videos. Thanks for watching.
Php is not recognized as an internal or external command error solution
มุมมอง 13K7 ปีที่แล้ว
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video you can see, how to fix this error - 'php' is not recognized as an internal or external command, operable program or batch file.
Can I hire you to create my loading animation, please share your contact details
Nice animations 👍👍
Kota Shimura
2 to 6
Sincèrement merci frère
👍👏
No code, no like.
bro please text video
Is this all copyrighted or free to use ?
Anyone know why he puts extra 0's after: background: url(..) no-repeat 0 0; & padding: 15px 0; ? Thanks in advance!
Amazing collection.
if you explained it clearly i would be more good actually
Great video. Thanks!
Thanks
Thank you sir .. Sir keep upload video about programming it's really benefits us .
Thanks, yes we are working on some cool stuff, will upload soon, stay tuned.
Superb ❣️❣️
good. thanks
Bhai isme transition kiase lagaun
how to put it in portfolio website?
thank you for inspiration!!!
Good one ! ♥
Thanks
Not working <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="loader">Loading...</div> </body> </html> <style> $color-background: #eaecfa; $color-loader: #ce4233; body { background: $color-background; } .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: helvetica, arial, sans-serif; text-transform: uppercase; font-weight: 900; color: $color-loader; letter-spacing: 0.2em; &::before, &::after { content: ""; display: block; width: 15px; height: 15px; background: $color-loader; position: absolute; animation: load .7s infinite alternate ease-in-out; } &::before { top: 0; } &::after { bottom: 0; } } @keyframes load { 0% { left: 0; height: 30px; width: 15px } 50% { height: 8px; width: 40px } 100% { left: 235px; height: 30px; width: 15px} } </style> <script> </script>
thanks 🥰
Thankyou so much. ))
0 coments really? You need more appreciation 👍
Thanks for your support @Lazy-Hero
Thank you very much
Thank you, this was very helpful and great video. Could have paused for longer before transitions to allow people time to look at the result before the screen changed.
Thanks a lot
Love this little tutorial, thanks a lot! One (stupid) question though. If I create a second collapse right under this one by copying this code, clicking the second one opens up the first one. I don't really get why exactly it is doing that. How do I add multiple items to the dropdown?
You just need to change the checkbox id, i.e: "collapsible-head 2". Then change it too on the label for it to place the label properly.
If for some reason it doesn't work, you can add an id to that 'text' class that houses the title and lorum text. Then copy the css part that lists :checked and change both of its entries with your new id's. i.e: .collapsible #collapsible-head1:checked ~ #field1 i.e: .collapsible #collapsible-head2:checked ~ #field2 and so on.
Its been 2 year ago . And i have been code since at university until now Im work been surfing every kafka docker and lots stuff. But when back to html i don't have any idea how to create a thing like this 🤣 man thanks alot for this simple and short video .
Thanks
Nice tutorial, but I'm getting this space between the icon and border that was created. How to fix this problem, thank you
how to make the collpasible appear when they have been hovered?
Thank you soooo much!
This video came in so clutch, searched for a tutorial like this for days, finally found this. Nice video man
Thanks @KappiNor
thanks bro
Great video, simple and everything still works even two years later!
how is this simple? when he already has the code before the video. nice video tho
what is arrow.svg?
Its just a icon name
But it's not showing arrow...
@@supriyosahoo6007 its in his files. You need to download a SVG files from online or make your own. Then he linked it in his code VIA url()
Brother i did same but icons are not showing
Hi Adeel, may be you are missing something, please try once more
Why you used SVG URL in href? Now how to add link on icons now?
I have used SVG url to call icons from external file, you can add link in outer anchor tag.
@@EnhanceCoding In my case, i already used anchor tag on image and linked to details page but i need to put image preview icon on image and svg already inside the anchor.
I cant open it. All i see is the black screen
plz sharre code folder of this
i want css file of this
My screen is just black where it says all those things that but I can't open it to my PC I can't do anything so how do I get it off the black screen
Thank’s broo
Give this code
This is the best svg sprite walkthrough I've seen. Thank you. I was having a hard time with the class, Id and symbols.
Thanks @Christopher
This is not a good tutorial. The whole point is to automate this process not do it manually like this.
@@techtipsuk I think you are wrong ! Before automating, it is necessary, above all, to understand.
@@techtipsuk So how one automates this? Can you elaborate?
@@2hanza4 Once you have node installed you could either use webpack or vite or some other packages to facilitate your work. Cheers))
After adding path in environment variable it still showing this error. Please help me
Hi, please restart your server once
can you please provide the code for this
thank you
Thnq for solving my prblms
Thanks @tanu