Search the Community

mesale0077 asked me whether I could code some CSS loading animations from different web sites. These are the results using GDI+ (AutoIt v3.3.12.0+ required!): _GDIPlus_MonochromaticBlinker.au3 / _GDIPlus_RotatingBokeh.au3 _GDIPlus_SpinningCandy.au3 / _GDIPlus_SteamPunkLoading.au3 _GDIPlus_IncreasingBalls.au3 / _GDIPlus_PacmanProgressbar.au3 _GDIPlus_StripProgressbar.au3 / _GDIPlus_RingProgressbar.au3 _GDIPlus_LineProgressbar.au3 / _GDIPlus_SimpleLoadingAnim.au3 _GDIPlus_TextFillingWithWater.au3 / _GDIPlus_MultiColorLoader.au3 _GDIPlus_LoadingSpinner.au3 / _GDIPlus_SpinningAndPulsing.au3 _GDIPlus_TogglingSphere.au3 / _GDIPlus_CloudySpiral.au3 _GDIPlus_GlowingText.au3 (thanks to Eukalyptus) / _GDIPlus_HypnoticLoader.au3 _GDIPlus_RotatingRectangles.au3 / _GDIPlus_TRONSpinner.au3 _GDIPlus_RotatingBars.au3 / _GDIPlus_AnotherText.au3 (thanks to Eukalyptus) _GDIPlus_CogWheels.au3 (thanks to Eukalyptus) / _GDIPlus_DrawingText.au3 (thanks to Eukalyptus) _GDIPlus_GearsAnim.au3 / _GDIPlus_LEDAnim.au3 _GDIPlus_LoadingTextAnim.au3 / _GDIPlus_MovingRectangles.au3 _GDIPlus_SpinningAndGlowing.au3 (thanks to Eukalyptus) / _GDIPlus_YetAnotherLoadingAnim.au3 _GDIPlus_AnimatedTypeLoader.au3 / _GDIPlus_Carousel.au3 Each animation function has a built-in example how it can be used. AiO download: GDI+ Animated Wait Loading Screens.7z (previous downloads: 1757) Big thanks to Eukalyptus for providing several examples. Maybe useful for some of you Br, UEZ PS: I don't understand CSS - everything is made out of my mind, so it might be different from original CSS examples

Since monoceres has released I searched for a way to map the 2D image of the earth to a 3D sphere with rotation. Here the result (after 9 years of research ^^) as a non realistic physical animation: ==> Due to the fact that AutoIt / GDI+ are not that fast I couldn't add a moon animation additionally. Thanks to one of Eukalyptus' code to pointing me to the right direction. U rock man. Source code extract only - not working because of missing binary data (images): ;coded by UEZ build 2017-03-18 #pragma compile(x64, false) #pragma compile(Icon, "c:\Program Files (x86)\AutoIt3\Icons\au3.ico") #AutoIt3Wrapper_Run_Au3Stripper=y #Au3Stripper_Parameters=/so /pe /rm #AutoIt3Wrapper_Run_After=del /f /q "%scriptdir%\%scriptfile%_stripped.au3" #include <GDIPlus.au3> #include <GuiConstantsEx.au3> #include <WindowsConstants.au3> _GDIPlus_Startup() Global $hGUI, $iFPS = 0, $iShowFPS = 0, $bExit Global Const $iW = 800, $iW2 = ($iW - 100) / 2, $iH = 500, $fRad = ACos(-1) / 180, $sTitle = "GDI+ Rotating Earth v1.7 coded by UEZ 2017" AutoItSetOption("GUIOnEventMode", 1) GDIPlus_RotatingEarth() AutoItSetOption("GUIOnEventMode", 0) _GDIPlus_Shutdown() Func GDIPlus_RotatingEarth() $bExit = False $hGUI = GUICreate($sTitle, $iW, $iH) GUISetState(@SW_SHOW, $hGUI) ;create canvas elements Local Const $hDC = _WinAPI_GetDC($hGUI) Local Const $hHBitmap = _WinAPI_CreateCompatibleBitmap($hDC, $iW, $iH) Local Const $hDC_backbuffer = _WinAPI_CreateCompatibleDC($hDC) Local Const $DC_obj = _WinAPI_SelectObject($hDC_backbuffer, $hHBitmap) Local Const $hCanvas = _GDIPlus_GraphicsCreateFromHDC($hDC_backbuffer) _GDIPlus_GraphicsSetInterpolationMode($hCanvas, $GDIP_INTERPOLATIONMODE_NEARESTNEIGHBOR) _GDIPlus_GraphicsSetPixelOffsetMode($hCanvas, $GDIP_PIXELOFFSETMODE_HALF) Local Const $hBrush_Clr = _GDIPlus_BrushCreateSolid(0xFF000000), _ $hBrush_FPS = _GDIPlus_BrushCreateSolid(0xFFF0F0F0), _ $hFormat_FPS = _GDIPlus_StringFormatCreate(), _ $hFamily_FPS = _GDIPlus_FontFamilyCreate("Arial"), _ $hFont_FPS = _GDIPlus_FontCreate($hFamily_FPS, 8), _ $tLayout_FPS = _GDIPlus_RectFCreate(0, 0, 60, 16), _ $hImage_Earth = _GDIPlus_BitmapCreateFromMemory(_Earth()), _ $hImage_Galaxy = _GDIPlus_BitmapCreateFromMemory(_Galaxy()), _ $hImage_Clouds = _GDIPlus_BitmapCreateFromMemory(_Clouds()), _ $hImage_Moon = _GDIPlus_BitmapCreateFromMemory(_Moon()), _ $hImage_USSE = _GDIPlus_BitmapCreateFromMemory(_USSE()), _ $hMatrix = _GDIPlus_MatrixCreate(), $hMatrix2 = _GDIPlus_MatrixCreate(), _ $hPath = _GDIPlus_PathCreate(), $hPath2 = _GDIPlus_PathCreate(), _ $hPen = _GDIPlus_PenCreate(0xC0FFFFFF, 1) _GDIPlus_ImageRotateFlip($hImage_USSE, 4) Local $aDim = _GDIPlus_ImageGetDimension($hImage_Earth) Local $hGfx = _GDIPlus_ImageGetGraphicsContext($hImage_Earth) _GDIPlus_GraphicsDrawStringEx($hGfx, "Coded by UEZ 2017 ^^", $hFont_FPS, _GDIPlus_RectFCreate(0, $aDim[1] / 2 - 4, 120, 12), $hFormat_FPS, $hBrush_FPS) _GDIPlus_ImageDispose($hGfx) Local Const $hTexture_Earth = _GDIPlus_TextureCreate($hImage_Earth), $hTexture_Clouds = _GDIPlus_TextureCreate($hImage_Clouds) DllCall($__g_hGDIPDll, "int", "GdipTranslateTextureTransform", "ptr", $hTexture_Earth, "float", -200, "float", 0, "long", 0) DllCall($__g_hGDIPDll, "int", "GdipTranslateTextureTransform", "ptr", $hTexture_Clouds, "float", -100, "float", 0, "long", 0) Local $iDiameter = $aDim[0] < $aDim[1] ? $aDim[0] : $aDim[1], _ $fDiameter2 = $iDiameter / 2, _ $fDX = ($iW - $iDiameter) / 2, $fDY = ($iH - $iDiameter) / 2 _GDIPlus_PathAddEllipse($hPath, $fDX - 1, $fDY - 1, $iDiameter + 2, $iDiameter + 2) Local Const $hBrush = _GDIPlus_PathBrushCreateFromPath($hPath) _GDIPlus_PathBrushSetCenterColor($hBrush, 0x02000008) _GDIPlus_PathBrushSetCenterPoint($hBrush, $fDX + $fDiameter2 + 1, $fDY + $fDiameter2 + 1) _GDIPlus_PathBrushSetSurroundColor($hBrush, 0xF8000000) _GDIPlus_PathBrushSetGammaCorrection($hBrush, 1) _GDIPlus_PathBrushSetFocusScales($hBrush, 0.50, 0.50) _GDIPlus_PathAddEllipse($hPath2, -1, -1, 201, 201) Local Const $hBrush2 = _GDIPlus_PathBrushCreateFromPath($hPath2) _GDIPlus_PathBrushSetCenterColor($hBrush2, 0x0800000) _GDIPlus_PathBrushSetCenterPoint($hBrush2, 100, 100) _GDIPlus_PathBrushSetSurroundColor($hBrush2, 0xFF000000) _GDIPlus_PathBrushSetGammaCorrection($hBrush2, 1) _GDIPlus_PathBrushSetFocusScales($hBrush2, 0.50, 0.50) $hGfx = _GDIPlus_ImageGetGraphicsContext($hImage_Moon) _GDIPlus_GraphicsFillEllipse($hGfx, -1, -1, 201, 201, $hBrush2) _GDIPlus_ImageDispose($hGfx) $iFPS = 0 GUISetOnEvent($GUI_EVENT_CLOSE, "_Exit_About") AdlibRegister("CalcFPS", 1000) Local $fTimer1, $fTimer2, $fScale, $fTmp, $fX, $fSin, $fZ, $fS, $zz, $z = 90, $iStep = 4 ;the higher $iStep is the faster the animation but lower the quality. Local $fPosX, $fPosY, $fSize, $fSpeed, $aMeteor[4] = [0, 10 + Random() * ($iH - 20), 5 + Random() * 10, 5 + Random() * 10] $fPosX = $iW + 60 $fPosY = Random() * ($iH - 100) + 50 $fSize = 0.5 + Random() * 2 $fSpeed = Random() * 3 + 1 $fTimer1 = TimerInit() $fTimer2 = TimerInit() Do DllCall($__g_hGDIPDll, "int", "GdipDrawImageRect", "handle", $hCanvas, "handle", $hImage_Galaxy, "float", 0, "float", 0, _ "float", $iW, "float", $iH) DllCall($__g_hGDIPDll, "int", "GdipSetSmoothingMode", "handle", $hCanvas, "int", 4) If TimerDiff($fTimer1) > 10000 Then DllCall($__g_hGDIPDll, "int", "GdipDrawLine", "handle", $hCanvas, "handle", $hPen, "float", $aMeteor[0], "float", $aMeteor[1], _ "float", $aMeteor[0] + $aMeteor[2] * 3, "float", $aMeteor[1] + $aMeteor[3] * 3) $aMeteor[0] += $aMeteor[2] $aMeteor[1] += $aMeteor[3] If BitOR($aMeteor[0] > $iW, $aMeteor[1] > $iH, $aMeteor[0] < 0, $aMeteor[1] < 0) Then $aMeteor[0] = 0 $aMeteor[1] = Random() * ($iH * 0.75) $aMeteor[2] = 8 + Random() * 12 $aMeteor[3] = 7 + Random() * 10 $fTimer1 = TimerInit() EndIf EndIf If TimerDiff($fTimer2) > 30000 Then DllCall($__g_hGDIPDll, "int", "GdipDrawImageRect", "handle", $hCanvas, "handle", $hImage_USSE, "float", $fPosX, "float", $fPosY, _ "float", 50 * $fSize, "float", 12 * $fSize) $fPosX -= $fSpeed If $fPosX < -100 Then $fPosX = $iW + 30 $fPosY = Random() * ($iH - 100) + 50 $fSize = Random() * 2 $fSpeed = Random() * 3 + 1 $fTimer2 = TimerInit() EndIf EndIf $zz = $z * $fRad $fX = $iW2 - Cos($zz) * 345 $z -= 0.5 $fZ = Sin($zz) $fS = 100 - $fZ * 50 DllCall($__g_hGDIPDll, "int", "GdipSetSmoothingMode", "handle", $hCanvas, "int", 1) DllCall($__g_hGDIPDll, "int", "GdipTranslateTextureTransform", "ptr", $hTexture_Earth, "float", 0.75, "float", 0, "long", 0) DllCall($__g_hGDIPDll, "int", "GdipTranslateTextureTransform", "ptr", $hTexture_Clouds, "float", 1.25, "float", 0, "long", 0) If $fZ > 0 Then _GDIPlus_GraphicsDrawImageRect($hCanvas, $hImage_Moon, $fX, 110, $fS, $fS) For $i = 1 To $fDiameter2 Step $iStep $fScale = 1 + $i / $fDiameter2 DllCall($__g_hGDIPDll, "int", "GdipSetMatrixElements", "handle", $hMatrix, "float", 1.0, "float", 0.0, "float", 0.0, "float", 1.0, "float", 0.0, "float", 0.0) DllCall($__g_hGDIPDll, "int", "GdipTranslateMatrix", "handle", $hMatrix, "float", $fDX + $fDiameter2, "float", $fDY + $fDiameter2, "int", 0) DllCall($__g_hGDIPDll, "int", "GdipScaleMatrix", "handle", $hMatrix, "float", $fScale, "float", $fScale, "int", 0) DllCall($__g_hGDIPDll, "int", "GdipTranslateMatrix", "handle", $hMatrix, "float", -$fDiameter2, "float", -$fDiameter2, "int", 0) DllCall($__g_hGDIPDll, "int", "GdipSetWorldTransform", "handle", $hCanvas, "handle", $hMatrix) DllCall($__g_hGDIPDll, "int", "GdipFillEllipse", "handle", $hCanvas, "handle", $hTexture_Earth, _ "float", $i, "float", $i, "float", $iDiameter -2 * $i, "float", $iDiameter - 2 * $i) DllCall($__g_hGDIPDll, "int", "GdipFillEllipse", "handle", $hCanvas, "handle", $hTexture_Clouds, _ "float", $i, "float", $i, "float", $iDiameter -2 * $i, "float", $iDiameter - 2 * $i) Next _GDIPlus_MatrixSetElements($hMatrix) _GDIPlus_GraphicsSetTransform($hCanvas, $hMatrix) DllCall($__g_hGDIPDll, "int", "GdipFillRectangle", "handle", $hCanvas, "handle", $hBrush, "float", $fDX, "float", $fDY, "float", $iDiameter, "float", $iDiameter) Else For $i = 1 To $fDiameter2 Step $iStep $fScale = 1 + $i / $fDiameter2 DllCall($__g_hGDIPDll, "int", "GdipSetMatrixElements", "handle", $hMatrix, "float", 1.0, "float", 0.0, "float", 0.0, "float", 1.0, "float", 0.0, "float", 0.0) DllCall($__g_hGDIPDll, "int", "GdipTranslateMatrix", "handle", $hMatrix, "float", $fDX + $fDiameter2, "float", $fDY + $fDiameter2, "int", 0) DllCall($__g_hGDIPDll, "int", "GdipScaleMatrix", "handle", $hMatrix, "float", $fScale, "float", $fScale, "int", 0) DllCall($__g_hGDIPDll, "int", "GdipTranslateMatrix", "handle", $hMatrix, "float", -$fDiameter2, "float", -$fDiameter2, "int", 0) DllCall($__g_hGDIPDll, "int", "GdipSetWorldTransform", "handle", $hCanvas, "handle", $hMatrix) DllCall($__g_hGDIPDll, "int", "GdipFillEllipse", "handle", $hCanvas, "handle", $hTexture_Earth, _ "float", $i, "float", $i, "float", $iDiameter - 2 * $i, "float", $iDiameter - 2 * $i) DllCall($__g_hGDIPDll, "int", "GdipFillEllipse", "handle", $hCanvas, "handle", $hTexture_Clouds, _ "float", $i, "float", $i, "float", $iDiameter - 2 * $i, "float", $iDiameter - 2 * $i) Next _GDIPlus_MatrixSetElements($hMatrix) _GDIPlus_GraphicsSetTransform($hCanvas, $hMatrix) DllCall($__g_hGDIPDll, "int", "GdipFillRectangle", "handle", $hCanvas, "handle", $hBrush, "float", $fDX, "float", $fDY, "float", $iDiameter, "float", $iDiameter) _GDIPlus_GraphicsDrawImageRect($hCanvas, $hImage_Moon, $fX, 110, $fS, $fS) EndIf _GDIPlus_GraphicsDrawStringEx($hCanvas, "FPS: " & $iShowFPS, $hFont_FPS, $tLayout_FPS, $hFormat_FPS, $hBrush_FPS) ;draw background message text _WinAPI_BitBlt($hDC, 0, 0, $iW, $iH, $hDC_backbuffer, 0, 0, $SRCCOPY) ;blit drawn bitmap to GUI $iFPS += 1 If $bExit Then ExitLoop Until False ;Not Sleep(10) AdlibUnRegister("CalcFPS") ;release resources _GDIPlus_PenDispose($hPen) _GDIPlus_BrushDispose($hBrush) _GDIPlus_BrushDispose($hBrush2) _GDIPlus_PathDispose($hPath) _GDIPlus_PathDispose($hPath2) _GDIPlus_MatrixDispose($hMatrix) _GDIPlus_MatrixDispose($hMatrix2) _GDIPlus_ImageDispose($hImage_Earth) _GDIPlus_ImageDispose($hImage_Galaxy) _GDIPlus_ImageDispose($hImage_Clouds) _GDIPlus_ImageDispose($hImage_Moon) _GDIPlus_ImageDispose($hImage_USSE) _GDIPlus_BrushDispose($hTexture_Earth) _GDIPlus_BrushDispose($hTexture_Clouds) _GDIPlus_FontDispose($hFont_FPS) _GDIPlus_FontFamilyDispose($hFamily_FPS) _GDIPlus_StringFormatDispose($hFormat_FPS) _GDIPlus_BrushDispose($hBrush_Clr) _GDIPlus_BrushDispose($hBrush_FPS) _GDIPlus_GraphicsDispose($hCanvas) _WinAPI_SelectObject($hDC_backbuffer, $DC_obj) _WinAPI_DeleteDC($hDC_backbuffer) _WinAPI_DeleteObject($hHBitmap) _WinAPI_ReleaseDC($hGUI, $hDC) GUIDelete($hGUI) EndFunc ;==>GDIPlus_RotatingEarth Func _Exit_About() $bExit = True EndFunc ;==>_Exit_About Func CalcFPS() ;display FPS $iShowFPS = $iFPS $iFPS = 0 EndFunc ;==>CalcFPS ;Code below was generated by: 'File to Base64 String' Code Generator v1.20 Build 2016-12-01 ... Download: Rotating Earth v1.7.au3 In line 92 you can modify the $iStep variable -> the higher $iStep is the faster the animation & lower the quality. So long...

Here a little Outro for all the animation lovers which I created when I played around with spheres. Download: Sphere Outro.7z --=> 7-Zip archive Credits: Eukalyptus (GDIPlusEx.au3 -> don't search for it because it is not released for the public ) wakillon & TitchySID.dll creator If it is too slow reduce the stars in line 77 (-=> $iStars) If you cannot see the fade in/out text change in line 152 the font name from "Plantagenet Cherokee" to "Times New Roman"!